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

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

Mary-Kate Olsen

Release： 2024-12-14 21:29:14

Original

431 people have browsed it

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);
}

Copy after login

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;
}

Copy after login

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!