Pierre Tanguay Pierre Tanguay - 1 year ago 63
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:


Thank you!

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download