


Example showing the effect of using css3 and pseudo-element to expand the underline to both sides when the mouse is moved in
This article mainly introduces the relevant information on using css3+ pseudo-elements to achieve the effect of underlining expanding to both sides when the mouse is moved in. The article first introduces it in detail to facilitate everyone's understanding, and then provides a complete example code for everyone to refer to. Study, if you need it, come and study together.
Let’s take a look at the renderings first:
##Implementation idea:
Position the pseudo elements: before and :after to the middle of the bottom of the element, and set the width from 0 to 100% to achieve the goal.Implementation method:
1. First define a block element (inline elements have no width and height) and modify the style to a background color of Light gray rectangle, set relative positioning. html code<p id="underline"></p>
#underline{ width: 200px; height: 50px; background: #ddd; margin: 20px; position: relative; }
#underline:before, #underline:after{ content: "";/*单引号双引号都可以,但必须是英文*/ width: 0; height: 3px; /*下划线高度*/ background: blue; /*下划线颜色*/ position: absolute; top: 100%; left: 50%; transition: all .8s ; /*css动画效果,0.8秒完成*/ }
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/ left:0%; width:50%; } #underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/ left: 50%; /*这句多余,主要是为了对照*/ width: 50%; }
Optimization
1. Although the purpose is achieved, But using two pseudo-elements, one extending 50% to the left and one extending 50% to the right, can the purpose be achieved by using only one extending to 100%?
#underline:after{ content: ""; width: 0; height: 5px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } #underline:hover:after{/*原理是left:50%变成0%的同时,宽度从0%变成100%*/ left: 0%; width: 100%; }
Full code
鼠标移入下划线展开 <p id="underline"></p>
The above is the detailed content of Example showing the effect of using css3 and pseudo-element to expand the underline to both sides when the mouse is moved in. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adjust the input method to English and hold down the Shift key and the minus key. Applicable model of the tutorial: Lenovo AIO520C System: Windows 10 Professional Edition: Microsoft Office Word 2022 Analysis 1 First check the Chinese and English typing of the input method and adjust it to English. 2Then hold down the Shift key and the Minus key on your keyboard at the same time. 3 Check the interface to see the underlined words. Supplement: How to quickly enter underline in Word document 1. If you need to enter an underline in Word, select the space with the mouse, then select the underline type in the font menu to enter. Summary/Notes: Be sure to change the input method to English before proceeding, otherwise the underscore cannot be successfully entered.

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

When entering text in Word, sometimes some positions need to be underlined to explain or emphasize. So why can't the blank underline in the WPS document be printed? How should I underline? The editor will introduce it to you in detail below, let’s take a look. In WPS documents, you can underline the blank spaces, as shown in the figure. How to do it? Please read below for detailed operations. Take the document in the picture as an example to demonstrate how to underline the blank space. Place the cursor on the right side of the colon of "Name" in the picture, and press the space bar on the keyboard. In order to facilitate the demonstration, I have increased the font size, as shown below: 2. Then, after the cursor reaches the set position, click and hold without letting go, and move to Drag on the left to the side of the colon, as shown in the picture: 3. Then click the "underline" icon, as indicated by the arrow in the picture.

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

With the progress of society, technology has also developed rapidly, and electronic equipment has become a standard configuration in today's office. There are various types of office software today. Excel is still a commonly used operation in office software. We sometimes set settings in tables. In order to highlight these contents, we will choose different color fonts or deepen the fonts, and sometimes underline them for emphasis. The fonts are easy to set, but not everyone knows how to add underlines. Editor Today I will teach my novice friends how to underline in excel. 1. Open Excel and type a few words, as shown in the picture below. 2. Select the text, right-click and select "Format Cells" option, as shown in the figure below. 3. Find “single underline” and

How to cancel the underline in css a: 1. Create an HTML sample file; 2. Add the a tag to the body; 3. Cancel the underline by adding "#none{text-decoration: none;}" to the specified a tag.

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
