How can custom underline to a text

问题:

How to get border-bottom like in image. I've tried text-underline for a h1 tag using text-decoration property.

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>

回答1:

Here's one more solution:

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; }

<div> <h1>navigation</h1> </div>

回答2:

You can do it with css3 linear-gradient().

Steps:

1. Create background image with linear-gradient().
2. Adjust its size with css background-size property.
3. Place it at the bottom left position of the element with background-position css property.

Necessary 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>

回答3:

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: ''; }

<div>   <h1>navigation</h1> </div>

回答4:

Try to this:

.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>

回答5:

You can use Flexbox and :after pseudo-element.

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: ''; }

<h1>navigation</h1>

You can also use relative/absolute positions to position pseudo-element.

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; }

<h1>navigation</h1>

回答6:

h1:after {     content : "";     width   : 50%;  /* you can set here the length of border */     border-bottom:1px solid #f16a70; }

Update h1:after css

转载请标明出处:How can custom underline to a text

文章来源: How can custom underline to a text