CODEWITHSUNDEEP
css
Adi
Adi

Reputation: 63

Custom underline effect, other than creating a background image for it

is there a better way to create this style of "underline" through CSS, other than creating a background image for it?

To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!

Custome underline

Upvotes: 2

Views: 174

Answers (3)

Wordica
Wordica

Reputation: 2595

I always create "divider", like:

<div class='divider'>
    <div class='divi-1'></div>
    <div class='divi-2'></div>
    <div class='divi-3'></div>
</div>

CSS:

.divider{
    padding-top:15px; //or other
    text-align:center;
    display:block; // or column in bootstrap like col-md-12
}

.divider .divi-1{
    display:inline-block;
    height:2px; //or other
    width:50px; // or other
    background:#e5e5e5;
.

.divider .divi-2{
    display:inline-block;
    height:2px;
    width:50px;
    background:#000000;
}
.divider .divi-1{
    display:inline-block;
    height:2px; //or other
    width:50px; // or other
    background:#e5e5e5;
}

And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157414

You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.

Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.

Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.

@import url('https://fonts.googleapis.com/css?family=Varela+Round');

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  font-family: Varela Round;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: bold;
  color: #401f1c;
  margin: 40px; /* not required, only for demo purpose */
}

h1 span {
  color: #efcc4c;
}

h1:before,
h1:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

h1:before {
  bottom: -11px;
  width: 40px;
  border-bottom: 3px solid #efcc4c;
  z-index: 1;
}

h1:after {
  width: 80%;
  border-bottom: 1px solid #ddd;
  bottom: -10px;
}
<h1>Our <span>Services</span></h1>

Edit: Refactored my code and making the demo more precisee.

Upvotes: 4

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try this

HTML

<div class="text">
  <span>our</span>
  Services
</div>

CSS

.text{
  font-weight:600;
  font-size:25px;
  color:red;
  position: relative;
  display:inline-block;
}
.text::after,
.text::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin:auto;
  border-radius:5px;
  height:0px;
}

.text::before{
  width:100%;
  border:1px solid #ccc;
}
.text::after{
  width:50%;
  border:2px solid red;
  bottom:-6px;
}

.text span{
  color:#000000;
}

Link for reference

hope this helps..

Upvotes: 1

Related Questions