Share on

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

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 Oct. 31, 2022

WordPress block editorUsing Avada Elements in the Block Editor
Targeting the Boxes

Leave a Reply

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

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    Customization | Layout

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Customization | Elements

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    Avada Challenge | Customization

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    Avada Challenge | Customization

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    Customization | General Posts

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Customization | Layout

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022