текст, выделенный жирным шрифтомПодскажите как сверстать такой блок без анимации на CSS?
2 ответа
Можно еще проще.
* { box-sizing: border-box; }
li { list-style-type: none; }
p { margin: .5rem 0 2.5rem .5rem;
letter-spacing: .2rem;
text-transform: uppercase; }
progress, output { display: block; }
progress { border-radius: 0; width: 100%; height: 5px; }
progress::-webkit-progress-bar { background-color: #aaa; }
progress::-moz-progress-bar { background-color: #aaa; }
progress::-webkit-progress-value { background-color: #000; }
progress::-moz-progress-value { background-color: #000; }
li output { position: absolute; transform: translate(-4rem, .5rem); }
li:nth-child(1) output{ margin-left: 90%; }
li:nth-child(2) output{ margin-left: 80%; }
li:nth-child(3) output{ margin-left: 85%; }
<ul>
<li>
<progress value="0.90"></progress>
<output>90%</output>
<p>Branding</p>
</li>
<li>
<progress value=".80"></progress>
<output>80%</output>
<p>Design</p>
</li>
<li>
<progress value=".85"></progress>
<output>85%</output>
<p>Development</p>
</li>
</ul>
примерно так:
.progress {
position: relative;
border-top: 3px solid black;
width: 300px;
padding-top: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
}
.progress:after {
position: absolute;
top: -3px;
right: 0px;
border-top: 3px solid #c0c0c0;
width: calc(100% - 75%);
padding-top: 10px;
margin-left: -24px;
content: "75%";
text-indent: -25%;
text-transform: uppercase;
letter-spacing: .2rem;
color: #c0c0c0;
}
<div class = 'progress'>НАЗВАНИЕ</div>