HTML Layout Guide: How to Use Pseudo-Elements for List Decoration

HTML Layout Guide: How to use pseudo-elements for list decoration

Introduction:

In web design, lists are one of the common elements. Used to display a series of related content. However, a simple list style can appear boring and fail to capture the user's attention. In order to increase the attractiveness of the list, we can use CSS pseudo-elements to decorate it. This article explains how to use pseudo-elements to beautify lists and provides specific code examples.

1. List basic style design:

Before using pseudo elements to decorate the list, we first design the basic style of the list. Suppose we have an HTML unordered list with the following structure:

<ul class="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

We can use CSS to set the style of the list items, including font, font size, color, line height, background color, etc. Here is a simple style as an example:

.list {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

.list li {
  padding-left: 20px;
  margin-bottom: 10px;
}

The above code sets the font of the list to Arial sans-serif, the font size to 14 pixels, the color to #333 (black), the line height to 1.5 times, and the background color is #f5f5f5 (light gray). Each list item has a left margin of 20 pixels and a bottom margin of 10 pixels.

2. Use pseudo elements to decorate the list:

1. Set the bullet style:

To customize the bullet style of the list, we can use Pseudo element ::marker is implemented. For example, if we want to use dots as bullets, we can use the following code:

.list li::marker {
  content: "●";
  color: #ff0000;
}

The above code sets a red dot for each list item through the ::marker pseudo-element. You can customize the bullet style according to your needs, such as size, color, font, etc.

2. Add an icon before the item:

If you want to add an icon as a decoration in front of each list item, we can use the pseudo element ::before to fulfill. The following is a sample code:

.list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: cover;
  margin-right: 10px;
}

The above code adds an icon with a width and height of 20 pixels before each list item through the ::before pseudo-element. You can replace icon.png with the image path you want to use, and set the size, spacing, and other styles of the icon as needed.

3. Add decorative elements after items:

If you want to add a decorative element after each list item, we can use the pseudo element ::after to fulfill. The following is a sample code:

.list li::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ff0000;
  border-radius: 50%;
  margin-left: 10px;
}

The above code adds a red dot with a diameter of 10 pixels after each list item through the ::after pseudo-element. You can style decorative elements according to your needs, such as size, color, shape, etc.

Conclusion:

Using pseudo-elements to decorate lists is a simple and effective way to make your lists more attractive and personalized. By setting bullet styles, adding icons before items, and adding decorative elements after adding items, we can achieve a variety of list decoration effects. The above are some of the sample codes. You can modify and extend them according to your own needs to create a unique list style and improve the user experience of the web page.

Reference link:

• CSS pseudo-elements: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
• HTML list: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul
• CSS list style: https://developer.mozilla.org/zh-CN /docs/Web/CSS/list-style

The above is the detailed content of HTML Layout Guide: How to Use Pseudo-Elements for List Decoration. For more information, please follow other related articles on the PHP Chinese website!