Example code for implementing the "plus sign" effect with CSS

To achieve the plus sign effect shown below:

To achieve this effect, you only need a div element.

CSS is needed for before, after, and border properties.

First set a div note

 <div class="add"></div>

Set another border:

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

The border now looks 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 used absolute positioning. Now 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 when the mouse is hovering:

.add:hover {
  color: blue;
}

The final style:

When the mouse hovers over it, it changes color:

You can view the effect here:

https://jsbin.com/quvidap/edit?html,css,output

Summarize

The above is the example code of how to use CSS to achieve the "plus sign" effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!