Menu
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 :
But, I would like the line to expand and fill in the whole div before and after the title, like this :
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;
}
700
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.
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.
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:
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.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
