Jump to content
newcoder1010

How to underline a text

Recommended Posts

Hello, 

How can I underline steps similar to the image?

https://drive.google.com/open?id=1mJv4iUX2Nsu627yQCSctHccKC6DV87a_

I started but it is not working as expected. 

 

<div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2">
STEP 1<br><span class="o">- </span><span class="r">- --</span>
</div>

<div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2">
STEP 2<br><span class="o">- </span><span class="r">- --</span>
</div>

<div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2">
STEP 3<br><span class="o">- </span><span class="r">- --</span>
</div>

<div class="steps-no col-xs-2 col-sm-2 col-md-2 col-lg-2">
STEP 4<br><span class="o">- </span><span class="r">- --</span>
</div>


span.o {
    color: blue;
    font-size: 20px;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

I think my html is also wrong. Please advise!

Edited by newcoder1010

Share this post


Link to post
Share on other sites

Wrap each character in a span a give these a bottom border. That is the only way to get border thickness and gaps between letters using margins.

Share this post


Link to post
Share on other sites

in css file you have try to this

span.o 

{

color:blue;

padding:0;

font-size:20px;

font-weight:bold;

text-decoration:underline;

}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...