Pure CSS to achieve the effect of a plus sign (code example)

The content of this article is about the effect of adding a sign in pure CSS (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Achieve the plus sign effect in the picture below:

If you want to achieve this effect, you only need one p element.

You need to use css for before, after, and border features.

First set a div note

<div></div>

Then set a border:

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

At this time the border is like this:

We can use the pseudo-class before and its border-top to set a "horizontal":

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

Note that we use absolute positioning. At this time it becomes like this:

Referring to the above, we can use the after pseudo-class and border-bottom to set a "vertical":

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

Add the hover pseudo-class and set the color of the mouse hover:

The final style:

When When the mouse is hovered over, it will change color:

The above is the detailed content of Pure CSS to achieve the effect of a plus sign (code example). For more information, please follow other related articles on the PHP Chinese website!