Home Web Front-end CSS Tutorial Example showing the effect of using css3 and pseudo-element to expand the underline to both sides when the mouse is moved in

Example showing the effect of using css3 and pseudo-element to expand the underline to both sides when the mouse is moved in

May 14, 2017 pm 01:32 PM
css3 Underline Pseudo element

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>
Copy after login

css style


#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}
Copy after login

2. Setting: before and: after Two pseudo elements, set their background color to blue (that is, the color of the underline), and use absolute positioning to fix the two elements to the bottom middle position of #underline.

css style


#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以,但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果,0.8秒完成*/

}
Copy after login

3. Set the mouse move-in effect.

css style


#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余,主要是为了对照*/

    width: 50%;

}
Copy after login

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%?


css code


#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%;

}
Copy after login

2. Only define: after pseudo-element, and change it from 50% to the left with a width of 0. This can be achieved by changing the width from 0% to the left to 100%, thereby achieving the purpose of streamlining the code, and there is also an extra :before to facilitate other operations.

Full code








    

    鼠标移入下划线展开

    





    <p id="underline"></p>



Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to type underline on the keyboard? How to type only underline without typing? How to type underline on the keyboard? How to type only underline without typing? Feb 22, 2024 pm 07:46 PM

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? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

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!

Why can't the blank underline in the wps document be printed? How should I underline it? Why can't the blank underline in the wps document be printed? How should I underline it? Mar 20, 2024 am 09:40 AM

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 &quot;Name&quot; 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 &quot;underline&quot; icon, as indicated by the arrow in the picture.

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

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!

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

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.

How to type underline in Excel How to type underline in Excel Mar 20, 2024 am 08:37 AM

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 &quot;Format Cells&quot; option, as shown in the figure below. 3. Find “single underline” and

How to remove underline in css a How to remove underline in css a Jan 28, 2023 pm 03:07 PM

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.

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

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;".

See all articles