如何在不新增HTML标签时用CSS Sprite实现列表项目符号

Alright, I’ve got you covered here. Let’s work through this problem since you’re stuck using CSS Sprites for list bullets in a chat bubble where you can’t add extra HTML and the :after pseudo-element is already taken for the bubble’s triangle.

Option 1: Use the :before Pseudo-Element (Clean & Flexible) #

Since :after is already in use for the chat bubble’s triangle, we can leverage the :before pseudo-element to render our sprite-based bullet. This keeps the HTML structure intact and avoids conflicts with existing styles.

First, we’ll remove the default list styling, then position the :before element as our custom bullet using the sprite image:

/* Base styles for the chat bubble list */
.chat-bubble ul {
  list-style: none; /* Remove default bullets */
  padding-left: 24px; /* Space for our custom bullet */
}

/* Style individual list items */
.chat-bubble li {
  position: relative;
  margin-bottom: 10px; /* Spacing between list items */
  line-height: 1.5; /* Ensure vertical alignment */
}

/* Create custom bullet with CSS Sprite */
.chat-bubble li:before {
  content: '';
  position: absolute;
  left: -24px; /* Align with the list's padding */
  top: 50%;
  transform: translateY(-50%); /* Vertically center the bullet */
  width: 18px; /* Width of your sprite icon */
  height: 18px; /* Height of your sprite icon */
  background: url('your-sprite-image.png') no-repeat;
  background-position: -36px 0; /* Adjust to target the correct icon in your sprite */
  /* Optional: Add background-size if your sprite needs scaling */
  /* background-size: 72px auto; */
}

/* Existing chat bubble triangle style (unchanged) */
.chat-bubble:after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-right-color: #f0f0f0; /* Match your bubble background */
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

Option 2: Use background-image on List Items (Simpler) #

If you prefer a more straightforward approach without pseudo-elements, you can apply the sprite directly as a background to each list item, then adjust padding to make space for it:

.chat-bubble ul {
  list-style: none;
  padding-left: 0; /* No extra padding needed here */
}

.chat-bubble li {
  padding-left: 24px; /* Space for the sprite icon + text spacing */
  background: url('your-sprite-image.png') no-repeat left center;
  background-position: 0 -18px; /* Target the correct sprite icon */
  background-size: auto 36px; /* Adjust based on your sprite dimensions */
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Existing chat bubble triangle style remains the same */
.chat-bubble:after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-right-color: #f0f0f0;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

Key Notes: #

• Sprite Positioning: Calculate background-position based on your sprite’s layout. For example, if each icon is 18px wide, the second icon would be at -18px 0, third at -36px 0, etc.
• Vertical Alignment: Use transform: translateY(-50%) (for :before) or background-position: left center (for background method) to ensure the bullet aligns with the text.
• Spacing: Adjust padding-left and left values to match your design’s spacing needs.

内容的提问来源于stack exchange，提问作者Bogdan