Is there a way to create space between the border (underline hover effect) and have the color of the line be red?
a {
text-decoration: none
}
li {
display: inline;
}
li:hover {
text-decoration: underline;
}<li><a href="">
abc
</a></li>
<li><a href="">
def
</a></li>
<li><a href="">
ggg
</a></li>
<li><a href="">
hello
</a></li>Consider using border-bottom and padding as an alternative approach
a {
text-decoration: none
}
li {
display: inline-block;
}
li:hover {
border-bottom: 1px solid red;
padding-bottom: 10px;
}<li><a href="">
abc
</a>
</li>
<li><a href="">
def
</a>
</li>
<li><a href="">
ggg
</a>
</li>
<li><a href="">
hello
</a>
</li>To achieve a customized line effect instead of the default line created by text-decoration, you can use border-bottom. This allows you to change the colors, line size, and padding for spacing between elements.
a {
text-decoration: none
}
li {
display: inline;
}
li:hover {
border-bottom:1px solid blue;
padding-bottom:8px;
}<li><a href="">
apple
</a></li>
<li><a href="">
banana
</a></li>
<li><a href="">
cherry
</a></li>
<li><a href="">
date
</a></li>It seems that the underline in the white space is caused by the closing </a> tag being on the next line, leading HTML browsers to collapse multiple spaces into one.
One solution would be to close your end tags immediately after the text to avoid this issue.
Additionally, make sure to update your last CSS code to li:hover a
a {
text-decoration: none
}
li {
display: inline;
}
li:hover a {
text-decoration: underline;
}<li><a href="">
abc</a>
</li>
<li><a href="">
def</a>
</li>
<li><a href="">
ggg</a>
</li>
<li><a href="">
hello</a>
</li> Styling links and list items using CSS:
a {
text-decoration:none;
display:block;
position:relative;
padding-bottom:20px;
}
li{
display:inline-block;
}
li:hover a:after {
content:"";
position:absolute;
height:1px;
width:100%;
left:0;
bottom:0;
background:red;
}<li><a href="">
abc
</a>
</li>
<li><a href="">
def
</a>
</li>
<li><a href="">
ggg
</a>
</li>
<li><a href="">
hello
</a>
</li>My Configuration I made modifications to the .col-lg-4 class in Bootstrap for Rails and added them to my custom.css.scss file after the import statements to remove padding completely. The Issue at Hand I am trying to override the styling of .embed-respo ...
My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...
Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module. Despite applying the correct font-family through CSS, it seems that m ...
I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...
Here is the HTML code snippet I am currently working with: <style> p::after { content: "%"; } </style> <div class="counter-box"> <p data-value="185">100</p> </div> At present, my CSS applies text injection to ...
I have a unique issue that requires a specific solution. Despite my extensive search across the internet, no useful answers were found. This is the snippet of HTML code in question: <form action="/timer.php" method="POST"> <span>Fir ...
Is there a way to use the jQuery.validator.addClassRules method in order to validate input fields and restrict my textbox to only accept comma-separated values? I also want it to display a default message if incorrect. <input type="text" cla ...
I am experiencing an issue with a contact form in my HTML/PHP code. Everything seems to be working fine, but when using the SAFARI browser, the form fails to validate if I try to submit without filling out all input fields. For example, my form includes: ...
I am encountering an issue where the functionality in this code snippet isn't quite working as expected. Specifically, I would like the 'huh' div to become opaque when the menu is hovered over. While attempting to achieve this with fadein/ou ...
JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...
I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...
I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...
Is there a way to customize the appearance of radio buttons in React or HTML elements, such as the screenshot below? I want to maintain the display of the number No.01 followed by the label next to it. If you have any suggestions or solutions, please shar ...
I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...
I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...
I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...
I am currently working on building a dynamic drop-down menu where the options in the second dropdown depend on the selection made in the first one. The initial dropdown consists of a list of tables, and based on which table is chosen, the columns of that s ...
Is there a way to invert the page while keeping text selection unchanged? I attempted to use ::selection to exclude it, but was unsuccessful. Below is the CSS code I used for inverting the page: html { background-color: #131313 !important; filter: cont ...
One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...
I'm in the process of converting HTML to a Wordpress theme. I've successfully enqueued the stylesheet, but unfortunately, some of the images are not displaying properly. It seems like it could be an issue with the subfolder structure. ...