css点状线代码,CSS3 Dot Leaders 点状线条

CSS

语言：

CSSSCSS

确定

/* * * * * * * * * * *

* Dot Leader

* * * * * * * * * * * */

@charset "UTF-8";

ul.leaders {

max-width: 37em;

padding: 0;

overflow-x: hidden;

list-style: none;

}

ul.leaders li:before {

float: left;

width: 0;

white-space: nowrap;

color: #a33131;

content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";

}

ul.leaders span:first-child {

font-weight: 600;

letter-spacing: 2px;

padding-right: 0.33em;

background: #c55;

}

ul.leaders span + span {

float: right;

padding-left: 0.33em;

background: #c55;

}

ul.leaders span + span:before {

content: '￥';

padding-right: 0.15em;

}

.fancy-rule {

border: none;

width: 600px;

overflow: hidden;

height: 20px;

text-align: center;

color: #a33131;

}

.rgba {

color: rgba(0, 0, 0, 0.15);

}

.fancy-rule.asterism:before {

content: "o————|| ⧖ ||————o";

letter-spacing: -1px;

/* Page setup & Styling */

}

*::selection {

background-color: #1a1a1a;

color: aliceblue;

}

body {

background-color: #c55;

color: #feca1e;

font-family: 'Avenir Next', sans-serif;

}

section {

position: absolute;

left: calc(30% - 10em);

width: 38em;

}