By Stephen Walker

This is a style for creating a food menu whit 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

Shrimp.$25

Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.

Steak. $45

Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.

Lobster.Market Price

Posuere, ad voluptatibus mollit reiciendis cum eum nostrud dui. Totam.

Coffee.$2.50

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 October 31, 2022

Most Advanced WordPress Form Builder

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.