How Can I Create Arrows Between Active Pages in a CSS-Only Wizard Using Only Pseudo-elements?

Creating Arrows in CSS Only

Problem:

In a wizard-like ordering process, there's a menu with active pages highlighted in green. The goal is to create an arrow pointing from one active page to the next, using only CSS.

Solution:

Using :before and :after Pseudo-Elements

Instead of using multiple

s and images, you can utilize CSS pseudo-elements (:before and :after) to generate the arrows without adding extra elements to the DOM. This technique involves creating rotated squares with the desired borders and positioning them appropriately.

#flowBoxes div {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  padding: 0 20px;
  border: 1px solid #ccc;
  margin-right: 2px;
}

#flowBoxes div.right:after {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 0;
  top: -1px;
  background-color: white;
  z-index: 150;
  transform: translate(10px, 4px) rotate(45deg);
}

#flowBoxes div.left:before {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: white;
  z-index: 50;
  transform: translate(-10px, 4px) rotate(45deg);
}

Styling Active Pages

To give the active pages the green arrow, apply the following styles:

.active {
  background-color: green;
  color: white;
}

.active:after {
  background-color: green;
}

This approach creates the desired arrows while preserving the solid color of the space between them.

The above is the detailed content of How Can I Create Arrows Between Active Pages in a CSS-Only Wizard Using Only Pseudo-elements?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn