如何在图像中获得边框底部。我使用h1
属性尝试了text-decoration
标记的文字下划线。
h1 {
color: #F16A70;
text-transform: uppercase;
font-size: 30;
font-family: oswald text-decoration: underline;
}
h1:after {
width: 60%;
border-bottom: 2px solid #F16A70;
}
<div>
<h1>navigation</h1>
</div>
答案 0 :(得分:5)
这是另一个解决方案:
h1{
color: #F16A70;
text-transform: uppercase;
display: inline-block;
font-size: 30;
font-family: oswald;
text-decoration: none;
background-image: linear-gradient(to right, #F16A70, #F16A70);
background-position: bottom left;
background-repeat: no-repeat;
background-size: 50% 2px;
transition: background-size .5s ease;
}
h1:hover {
background-size: 100% 2px;
}
&#13;
<div>
<h1>navigation</h1>
</div>
&#13;
答案 1 :(得分:2)
你可以使用css3
linear-gradient()
来完成。
<强>步骤:强>
linear-gradient()
创建背景图片。background-size
属性调整其大小。background-position
css属性的元素的左下角位置。必要的CSS:
h1 {
background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
background-size: 60% 3px;
background-position: left bottom;
}
h1 {
background: linear-gradient(to right, #F16A70, #F16A70) no-repeat;
background-size: 60% 3px;
background-position: left bottom;
color: #F16A70;
text-transform: uppercase;
font-size: 30px;
font-family: oswald, sans-serif;
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
}
<h1>Navigation</h1>
答案 2 :(得分:1)
h1{
color: #F16A70;
text-transform: uppercase;
font-size: 30;
font-family: oswald
text-decoration: underline;
}
h1:after{
display: block;
width:20%;
border-bottom: 2px solid #F16A70;
content: '';
}
&#13;
<div>
<h1>navigation</h1>
</div>
&#13;
答案 3 :(得分:1)
尝试这个:
.navigation-heading h1{
display:inline-block;
color: #F16A70;
text-transform: uppercase;
font-size: 30px;
font-family: 'oswald';
position:relative;
}
h1:after{
content:'';
position:absolute;
top:100%;
left:0;
width:65%;
border-bottom: 2px solid #F16A70;
}
<div class="navigation-heading">
<h1>navigation</h1>
</div>
答案 4 :(得分:0)
您可以使用Flexbox
和:after
伪元素。
h1 {
color: #F16A70;
text-transform: uppercase;
font-size: 30;
font-family: sans-serif;
display: inline-flex;
flex-direction: column;
}
h1:after {
width: 60%;
border-bottom: 2px solid #F16A70;
content: '';
}
&#13;
<h1>navigation</h1>
&#13;
您还可以使用relative/absolute
位置来定位伪元素。
h1 {
color: #F16A70;
text-transform: uppercase;
font-size: 30;
font-family: sans-serif;
position: relative;
display: inline-block;
}
h1:after {
width: 60%;
border-bottom: 2px solid #F16A70;
content: '';
position: absolute;
bottom: 0;
left: 0;
}
&#13;
<h1>navigation</h1>
&#13;
答案 5 :(得分:0)
h1:after {
content : "";
width : 50%; /* you can set here the length of border */
border-bottom:1px solid #f16a70;
}
更新h1:after
css