newcoder1010 Posted March 3, 2020 Share Posted March 3, 2020 (edited) 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 March 3, 2020 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2020 Share Posted March 3, 2020 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. Link to comment Share on other sites More sharing options...
Sherin Posted March 27, 2020 Share Posted March 27, 2020 in css file you have try to this span.o { color:blue; padding:0; font-size:20px; font-weight:bold; text-decoration:underline; } Link to comment Share on other sites More sharing options...
dsonesuk Posted March 27, 2020 Share Posted March 27, 2020 Now try to change thickness of underline. Go on try. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now