CSS - Create headline with special underline

Question

In the image below you can see some purple headline that I would like to implement with HTML and CSS. The headline can be arbitrary long of course. Difficult for me is the appropriate creation of the custom underline of the purple headline.

I thought of using display block for the headline and using the background-image and background-repeat property, but I have no idea how I should set purple decorative element on the right of the underline.

Any help is appreciated, thanks!

That sounds like something that would be best put in using either a basic PNG image, or an SVG for maximum flexibility. One tip that may help; on supported browsers, it is possible to have multiple background images (or, background gradients, etc) by specifying them all in sequence in one property, and then giving multiples of each future background property. (Detail would be in the CSS property's documentation) — Katana314, Oct 15 '15 at 14:58
Hey, multiple background images is something I've never heard of. Cool tip, thanks mate! — enne87, Oct 15 '15 at 15:01

Christoph · Answer 1 · 2015-10-15T15:34:12.127

You have several options to achieve this:

1) multiple background images

Declare the decorative element as second background image and position it to the right with no-repeat.

Browser support: very good

2) border-image

You can take your image as it is and declare it as border image.

browser support: good (with some exceptions)

3) pseudo element

use a pseudo element which has the decorative element as background image and place it accordingly in the lower corner.

browser support: excellent - all browsers support this (even down to IE8)

Sleek Geek · Accepted Answer · 2015-10-15T16:43:28.923

You can use a combo of CSS :before and :after selectors, and fontAwesome to achieve that. Take a look at my example and adjust as needed.

h1 {
    display: block;
    border-bottom: solid 1px #6B1E69;
    position: relative;
    width: 450px;
    color: #6B1E69;
}
h1:after {
    content: '';
    width: 100%;
    height: 25px;
    position: absolute;
    border-bottom: solid 3px #6B1E69;
    margin-bottom: -5px;
    bottom: 0;
    left: 0;
}



h1:before {
    content: '\f18c';
    font-family: fontAwesome;
    height: 25px;
    position: absolute;
    margin-bottom: -10px;
    bottom: 0;
    right: -30px;
    text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1> Thi sis your header text</h1>

Deepak Yadav · Answer 3 · 2015-10-15T17:51:57.367

I have no idea, how you can achieve that double border effect completely using CSS, but to some extent, this is possible. or you can use multiple images, or even a complete image for border and repeat it.

Note: have given 1px border-bottom to .under class to bring similar border effect as that of image.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 0 auto;
}
.heading {
  color: purple;
  margin: 10px 0 15px;
}
.under {
  width: 98%;
  display:block;
  position: relative;
  border-bottom: 1px solid purple;
}
.under:after,
.under:before {
  content: '';
  position: absolute;
  margin-top:2px;
  top: 100%;
}
.under:after {
  border-bottom: 3px solid purple;
  width: 98%;
  display: block;
  z-index: 10;
  left: 0;
}
.under:before {
  background: #fff url('https://i.stack.imgur.com/SHc6G.png')no-repeat right top;
  width: 33px;
  height: 28px;
  display: block;
  right: 0;
  top: 100%;
  left: auto;
  float: right;
  margin-top: -11px;
  z-index: 100;
}

<div class="container">

  <h1 class="heading under">
Some heading
</h1>
</div>

Thanks for the code but since I would like to use it for a single headline, I don't want to use containers. — enne87, Oct 15 '15 at 15:32
That container is just for demo. ! I wanted a limited width inside that screen. Ignore container. That *box-sizing is also for browser reset. Ignore these two things — Deepak Yadav, Oct 15 '15 at 15:37

score 0 · Answer 4 · answered Oct 15 '15 at 15:40

This is the closest I got with just pure html and css and no images

*{box-sizing:border-box;}
.container {
    padding-right:30px;
    position:relative;
    width:300px
}
h2 {
    color:purple;
    border-bottom:1px solid purple;
    padding:bottom:5px;
    margin-bottom:1px;
}
.line {
    height:3px;
    background-color:purple;
    margin:0;
    position:relative;
}
.line:after {
    width: 6px; 
    height: 6px; 
    background: white;
    border:4px solid purple;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -20px;
    bottom: -5px;
    z-index: 100;
    content: "";
}
.line:before {
    width: 16px; 
    height: 16px; 
    background: white;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -22px;
    bottom: -6px;
    z-index: 100;
    content: "";
}
.shape { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    z-index: 100;
    position:absolute;
    right:0px;
    bottom:0px;
} 
.shape:before { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left:0px;
    top:5px;
    z-index: 100;
    content: "";
}

.shape:after { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left: 5px;
    top: 2px;
    z-index: 100;
    content: "";
    transform: scale(1,0.8);
}

<div class="container">
   <h2>You header</h2>
    <div class="shape"></div>
    <div class="line"></div>
    
</div>

Cool but you always need this two extra divs, though. Nevertheless, a pure html and css solution, nice! — enne87, Oct 15 '15 at 15:58
Yeah. I'm using 2xbefore and 2xafter so the extra html markup is needed. I hope that in a close future we will be able to insert as many pseudoelements as we may need per html element. — Alvaro Menéndez, Oct 15 '15 at 16:02

score 0 · Answer 5 · edited May 23 '17 at 12:14

0

Using an SVG with a fallback image + solid bg-color is a good solution. I'd consider coding the image into the HTML and avoid making it a background image. The reason being is you'd need a hard-set height (or min-height) for the element containing the image and with today's web being available on multiple devices having a hard-set height or width can be a negative experience and is better off avoided, IMO.

Running the image as a block level element (or inline-block) will give you width flexibility without with no display issues or extra styling.

As far as layout goes, you could structure it as 2 separate images, put each image into a div and style with display:table-cell; inside a wrapper/container div w/ display:table;, put width:100%; on the border image to stretch across the container and push the small ornament image to the right.

This is a good thread for opinions on how to handle the image; css bg vs. inline.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 15 '15 at 15:40

Beepye

328
2
11

While I agree on the svg part, I would highly discourage using your solution: This question solely refers to styling/layout and has nothing to do with the semantics of the page. Thus, it should never occur in the HTML markup (even worse as two separate elements). Display table-cell is also a very inappropriate use here. There are enough reasonable options like i stated in my answer (e.g. border-images) which can deal with that in a responsive and multi device compatible manner. – Christoph Oct 15 '15 at 16:41
Since we're not here to argue, I'll just disagree that using table layout styling is "very inappropriate" in this situation. Your solutions in your above answer are all good options though. – Beepye Oct 15 '15 at 18:09
There is no need for arguing. Table layout is for tabular data. If you are using it for presentational purposes, you are doing it wrong. If you are to add additional unsemantic markup, at least do proper styling e.g. with flexbox or grid layout which where explicitely introduced for advanced styling. – Christoph Oct 16 '15 at 14:19

CSS - Create headline with special underline

5 Answers5