Home >Web Front-end >CSS Tutorial >Pure CSS to achieve the plus sign '+' effect (code example)
This article will introduce to you through code examples how to use pure CSS to achieve the plus sign " " effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Achieve the plus sign effect in the picture below:
If you want to achieve this effect, you only need one div element.
You need to use css for before, after, and border features.
First set a div note
<div class="add"></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; }
After adding Go to the hover pseudo-class and set the color when the mouse hovers up:
Final style:
When the mouse hovers up, it will change color:
More cool CSS3, html5, javascript special effects codes, all in: js special effects collection
For more related tutorials, please visit CSS3 latest version reference manual
The above is the detailed content of Pure CSS to achieve the plus sign '+' effect (code example). For more information, please follow other related articles on the PHP Chinese website!