Utilizing Pseudo-elements :before
and :after
to create a line that appears before and after a title with the help of an image:
.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}
Here is the current output:
However, the desired effect is for the line to extend and cover the entire div before and after the title, like so:
Is there a method to specify a certain percentage for the image to stretch? I attempted this approach, but it did not yield the desired result :
.mydiv img {
width: 100%;
height: auto;
}