How can I create this border?

HTML & CSS
1

Hi guys,

I would like to know how to create a border (so a horizontal line) like the one shown in the example below

Many thanks in advance and have a great friday night!

2

Try this:

<!doctype>
<html>
<head>
<title> title </title>
<style type="text/css">
  div  {position: relative;
        width: 5.5em; height: 2em;
        font-size:4.2em; font-weight:700; 
        border-bottom:solid 6px #f00;
        background-color:#cff;
        }
  span {display:inline-block; position:absolute; bottom:-0.21em; left:0;
        width:2em; height:0.42em;
        background-color: #000;
       }
</style>  
</head>
<body>
  <div>
    SitePoint
    <span></span>
  </div>
</body>
</html>

I am intrigued as to how others solve this problem :slight_smile:

1 Like
3

Thibault, u can follow my link http://codepen.io/tai101568/pen/qOOybK

1 Like
4

Here are a couple of ways to handle it,depending on whether there is semantic reason for the underline or not.

    <!doctype>
<html>
<head>
<title> title </title>
<style type="text/css">
  .sem, .notSemantic  { 
         padding-bottom: 10px;
         display: inline-block;
         padding-right:.5em;
        font-size:4.2em; 
        font-weight:700; 
        border-bottom:solid 6px #f00; /** root for all calculations will be 6px **/
        margin-bottom:1em;
        background-color:#cff;
        line-height: 1;
  }
 .notSemantic{ position: relative}
 .sem em { padding-bottom:3px; /* root/2 */border-bottom:12px solid;  font-style: normal;  }
 .notSemantic:before {content:''; border-bottom: 12px solid; position:absolute; width: 1em;  bottom:-9px; /* (size-root)*3/2  */}
</style>  
</head>
<body>
  <div class="sem"><em class="part">Site</em>Point</div><br>
   <div class="notSemantic">SitePoint</div>
</body>
3 Likes
5

Thanks! I thought there was a better way than just overlapping a border with a container, but it works now so I’m happy :smiley:
However, is there a reason why you use a span instead of a div with display:block?

@dresden_phoenix that’s an interesting approach, very cool!

6

Just personal preference that I do not like to use child divs. I think a div should just display a block with relevant content.

I was under the impression (could be wrong) that not all browsers respect setting a width (or positioning) to inline elements so just to be safe I set display:inline-block;

As you may have gathered my CSS knowledge is severely limited and as long as it works, validates and is Google Mobile Friendly then I am happy :slight_smile:

8

Here’s what I would do:

It uses ::before and ::after so that there are no unnecessary hooks cluttering up the HTML for something that’s purely decorative.

4 Likes
9

CSS is rather verbose but I still like the idea of using ::before and ::after.

I also spotted your deliberate mistake :slight_smile:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.


>**Incorrect:** font: 300 3em helvetica neue, arial, sans-serif; font-weight: 700;
>**Correct:** font: 300 3em "helvetica neue", arial, sans-serif; font-weight: 700;
10

Hehe, I love doing that since finding out that it’s actually quite OK to do that in CSS. What you quoted above is apparently an error in the CSS validator. See here: https://mathiasbynens.be/notes/unquoted-font-family

1 Like
11

Many thanks Ralph for the update.

it is not often I am right and once again proved wrong :frowning:

12

a :heart: plus a gold :star:

2 Likes
13

There are many ways to do so, you can either use the codes, or you can do it the direct way. it all depends on your need that how you want to do it or which way is easy for you.

14

Nice! What do you think about skipping the div::before and using a border-bottom instead?

1 Like
15

Yep, that works fine too—and it probably better. I figured I might have a bit more positioning control with both before and after, but on second thoughts, that’s really not the case. :slight_smile:

1 Like
16

But maybe you do.

I liked your method because by changing a couple of values, the entire style is within the padded portion of the box (no heretofore overlooked margin-bottom required). Reduces the chance of something intruding on the black portion of the underline.

div::before {
    bottom: 3px;   /* Changed from 0 */
    background: red;
}

div::after {
    bottom: 0;  /* Changed from -3px; */
    background: black;
}

It appeals to me.

3 Likes
17

Nice one, Ron. Yes, that makes more sense. :slight_smile:

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.