Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use before & after Pseudo-element to make a line

Tags:

html

css

I'm using Pseudo-element :before and :after to draw a line before and after a title. It's working with an image:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}

Here is the result :

you can see befor and after the 1px white horizontale line

But, I would like the line to expand and fill in the whole div before and after the title, like this :

The line reach reach the both sides of the div

Is there a way to specify a percentage for the image for it to stretch? I try this, but it's not working :

.mydiv img {
  width: 100%;
  height: auto;
}
like image 700
Guillaume Avatar asked Feb 10 '15 14:02

Guillaume


People also ask

What is the meaning of use before?

use before. use something before something. 1. to consume or use something before using something else. Use this jar before that one. This one is older. I used the old one before the one you just bought. 2. to consume or use something before a specified date. I will use this bottle of catsup before May.

When to use beforehand as an alternative to before?

We can use beforehand as an alternative to before as an adverb, especially when the reference to time is less specific. Beforehand is more common in informal speaking than in writing: I love singing but I always get so nervous beforehand.

How do you use before in a sentence?

We use before most commonly with noun phrases to refer to timed events: I like to go for a run before breakfast. You can check in online but you have to do it at least four hours before your flight. We use before to refer to place, especially when it is seen as part of a journey or as part of a sequence of events in time:

What is ::before and ::after used for in HTML?

It is often used to add cosmetic content to an element with the content property. It is inline by default. Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.


2 Answers

You don't need both :before and :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.

#header {
    width: 100%;
    height: 50px;
    margin: 50px 0;
    text-align: center;
    font-size: 28px;
    position: relative;
    background-color: #57585C;
}

#header:after {
    content: '';
    width: 100%;
    border-bottom: solid 1px #fff;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}

h3 {
    background-color: #57585C; /* Same as the parents Background */
    width: auto;
    display: inline-block;
    z-index: 3;
    padding: 0 20px 0 20px;
    color: white;
    position: relative;
    font-family: calibri;
    font-weight: lighter;
    margin: 0;
}
<div id="header">
   <h3>Last Projects</h3>
</div>
like image 56
Sleek Geek Avatar answered Oct 20 '22 19:10

Sleek Geek


In case you need <h3> title to have transparent background - you can use both :before and :after and display: flex

More about flex-grow you can read here https://developer.mozilla.org/en-US/docs/Web/CSS/flex.

body {
  background: linear-gradient(0.25turn, #3f87a6, #000000, #f69d3c); /* example of custom background */
}

#header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center; /* making vertical centerign of all children */
}

#header::before, #header::after {
  content: '';
  flex: 1 1 auto; /* the first digint is 'flex-grow: 1', helps elemet to occupy all free space */ 
  border-bottom: solid 1px #fff;
}

h3 {
  flex: 0 1 auto; /* the first digint is flex-grow: 0 */ 
  padding: 0 15px 0 15px;
  color: #fff;
}
<div id="header">
  <h3>Last Projects</h3>
</div>
like image 43
focus.style Avatar answered Oct 20 '22 18:10

focus.style