Is there a way to add space between text and the border below, as shown in the image linked?
I'd like the space to be 5px with a font-size of 15px.
My attempt:
.selected {
color: #284660;
}
.selected:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 5px;
border-bottom: 2px solid #284660;
}
However, this solution created a wider border than desired.
I have a few suggestions for improving the code snippet above.
You can experiment with this approach as well.
&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // adding some spacing here
}
Experiment with a negative value
{
padding-top: -10px;
}
If you are unsure of your DOM profile or the element that & references, simply adding a border and padding to an inline element will achieve the desired effect.
There is no need to manipulate pseudoelements.
<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>
It is advisable to place the styling information in the CSS file rather than inline for better organization.
For future reference, please provide sample HTML along with your CSS samples. I only provided assistance this time because the solution was as straightforward as "What is padding for 15, Trebek?"
Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...
In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...
I'm working on creating a div that acts as a link to another page. My goal is to have the entire background color of the div change to blue when someone hovers over it. I want to achieve this effect using CSS only, as I am not sure if javascript will ...
I encountered a strange issue where the images I added to a background disappeared. .Background1{ position:relative; top:0%; left:0%; height:100%; width:100%; content:url("/assets/backgroundlayer1.jpg") } .Background2{ posi ...
My issue is: I have a div with multiple children and I am trying to figure out how to exclude a specific element that is a child of the previously selected element. I attempted using the :not(selectedElement) selector as well as the .not(selectedElement) ...
Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...
After migrating my ASP.NET web forms application from a managed VPS to AWS EC2 using AWS Elastic Beanstalk, I encountered an issue with CSS bundling and minification. While the JavaScript was successfully bundled and minified on the Amazon server, the CSS ...
When developing my webpage, I needed to receive a viewmodel of a user account via Json. The data includes essential user details such as real name and email address. Additionally, I wanted to display (and modify) the groups that the user belongs to, along ...
As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...
As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...
My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...
Thinking about creating a mobile web application with the use of jQuery Mobile for tracking truck deliveries. I'm interested in sending GPS coordinates back to the server periodically. Is this possible even when the screen is turned off? If not, any ...
I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js. Within this file, there are several documen ...
I'm currently enhancing my node.js skills by utilizing express, and I've encountered a situation that is causing me some confusion. Essentially, when a user requests a webpage and the backend sends them the HTML page, how can I incorporate a Java ...
I've been struggling to position my Title and CTA Button at the bottom (or center) of the main image div. I'm using Bootstrap 5.1 and have tried various d-flex methods without success. You can view my code on jsfiddle. Thank you in advance for a ...
While working on a website with a navigation bar, I encountered an issue where the navbar was not responsive. When the window size was reduced, the nav bar shifted to an awkward position vertically, as shown in the first image. The navbar shifts below the ...
I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...
I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...
I am trying to incorporate a background image into a div element in such a way that it behaves like a background image in the body. I have looked at an example here: http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview where the width and height adjust ba ...
Can anyone provide a brief overview? For example, should buttons and images, as well as a footer, all be placed in one Media Query or kept separate? I'm feeling overwhelmed by this. ...