This is a style for creating a food menu with a dashed line between the item and the price. By targeting .title-heading-left this can be used on the title element at any size. The example below uses a heading element for the item and price. The price is wrapped in <strong> — this is followed by a text element.
Tonight’s Menu
Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.
Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.
Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.
Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.
.food__menu-item{
margin-bottom:4px!important;
}
.food__menu-item .title-heading-left{
display: flex;
align-items: center;
}
.food__menu-item .title-heading-left::after {
content: '';
flex: 1;
height:1.4rem;
opacity:.3;
margin: 0 15px;
border-bottom: 2px dashed firebrick;
}
.food__menu-item .title-heading-left strong {
order: 2;
color:firebrick;
}
Originally published on Oct. 31, 2022