Pierre Tanguay Pierre Tanguay - 4 months ago 10
HTML Question

:after going over my text with background

I am doing a menu for a restaurant, they want to have an orange line on the last line of the menu that leads to the price. Everything is done only the orange line gets OVER by text that has a background.

Here's the link:

http://abbababba.gosuuftw.com

Thank you!

Answer

Flexbox is not the best option because of its support with old browsers and a some of bugs on safari / firefox... I would move the :after to li instead of <p>

li:after {
    content: " ";
    height: 1px; /*never use 0.x px. there is no "half pixels", NEVER.*/
    display: block;
    bottom: 0; /* make sure align to bottom */
    /* top: -13px; */
    /* background: #f26622; a line is better*/
    border-bottom: 1px dashed #f26622; /* your fancy dashed line*/
    width: 100%;
    position: relative;
}