Absolutely! You can totally add a close-style "X" button to a specific element using pure CSS—this is ideal when you aren't sure about the exact placement of the element in your site's DOM structure. No extra HTML needed, which keeps your markup clean.

Simple CSS Implementation #

We’ll use the ::after pseudo-element to inject the "X" directly onto your target element. Here’s a flexible, customizable example:

/* Replace .target-element with your actual element selector (class, ID, or contextual selector) */
.target-element {
  /* Required: Set position to relative so the pseudo-element anchors to this element */
  position: relative;
  /* Optional: Add padding to prevent content from overlapping the X */
  padding-right: 35px;
}

.target-element::after {
  /* Insert the "X" character */
  content: "×";
  /* Position the button in the top-right corner */
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  /* Style for visibility and interactivity */
  font-size: 22px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  /* Optional: Hover effect for better user experience */
  transition: color 0.2s ease-in-out;
}

.target-element::after:hover {
  color: #222;
}

Customization Tips #

• Targeting the Right Element: If you don’t have a dedicated class/ID, use contextual selectors (like header > .banner, div.modal-content) to zero in on the element.
• Tweak the Design: Adjust font-size, color, right/top values, or add background: #eee; border-radius: 50%; padding: 2px 6px; to make the X look like a circular button.
• Adding Click Functionality: This CSS only handles the visual "X". If you need it to hide the element on click, you’ll need a small JavaScript snippet, but the core visual is fully CSS-driven.

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