What is the most effective way to include a small border at the bottom of text?
The border should be centered and no more than 20px thick, while the text could extend up to 200px.
It would look something like this:
<h1>This text might exceed the border length</h1>
<style>
.h1 {border-bottom:8px solid #000;}
</style>
Would it be best to insert a div after the h1 with a set maximum size?
To center content regardless of width, utilize the pseudo element ::after along with left:50% and transform:translateX(-50%).
h1 {
position: relative;
display:inline-block;
/* min-width:200px */
}
h1::after {
border-bottom: 1px solid red;
bottom: -10px;
content: "";
height: 1px;
position: absolute;
width: 20px;
left:50%;
transform: translateX(-50%);
}<h1>This text can be longer than the border</h1>Utilizing Linear Gradients for Background:
Alternatively, you can achieve this effect using background images with the linear-gradient property. One of the benefits of using a gradient is that it eliminates the need for extra pseudo-elements, allowing them to be utilized for other purposes. The thickness of the border is determined by the background-size in the Y-axis, while the width of the border is based on the size in the X-axis. To center the border, the background-position property is employed.
However, one downside is the limited browser support for linear-gradient compared to pseudo elements. Gradients are only compatible with IE10 and above.
h1 {
display: inline-block;
padding-bottom: 4px; /* creating space between text and border */
background: linear-gradient(to right, black, black);
background-repeat: no-repeat;
background-size: 20px 2px;
background-position: 50% 100%;
}<h1>This text can exceed the border length</h1><br>
<h1>Some shorter text</h1><br>
<h1>Some text</h1>Using a Pseudo-element:
Another approach is to utilize a pseudo-element to create the desired effect. By adding a pseudo-element with a 20px width and positioning it absolutely, we can achieve the same visual outcome. The left: 50%, translateX(-50%) properties are used to position the pseudo-element at the center. The thickness of the border is dictated by the height of the pseudo-element, while the color is determined by the background property.
An advantage of this method is its broader browser compatibility, as it should function properly in IE8 and newer versions.
h1 {
position: relative;
display: inline-block;
padding-bottom: 4px; /* creating space between text and border */
}
h1:after {
position: absolute;
content: '';
left: 50%;
bottom: -2px;
width: 20px;
height: 2px;
background: black;
transform: translateX(-50%);
}<h1>This text can exceed the border length</h1>
<br>
<h1>Some shorter text</h1>
<br>
<h1>Some text</h1>Enhancing the response given by dippas, you will notice that with wider widths, the border of the after elements becomes inaccurate. To avoid this issue, consider using calc(50% - 100px); instead of just 50%, where the width of 100px represents half of the width of the after element.
.bottom-border {
position: relative;
display:inline-block;
}
.bottom-border::after {
border-bottom: 2px solid red;
bottom: -10px;
content: "";
height: 1px;
position: absolute;
width: 200px;
left: calc(50% - 100px);
transform: translateY(-50%);
}<p class="bottom-border">
Hello there, I am a rather lengthy text, possibly around 200px or even more, nobody can say for sure.
</p>My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...
In my application, I have implemented a feature where data from an array is displayed in various panels. Users are given the option to remove panels from the view, with the removed panels then being populated in a dropdown menu. This allows users to select ...
I currently have my index.html and the necessary .js files hosted on Heroku, where everything is functioning properly. However, I wish to avoid directing my users to "myappname.herokuapp.com", so I am considering using my own website to host the .html file ...
I have a simple HTML form with a "response" div under it. The user is supposed to enter a password, and the script should check the database to find the corresponding username (which is working fine). Then, the username should be displayed in the "response ...
I have consecutive sections, and in between them I have an aside without a corresponding anchor. The issue is that the scrollspy is active with the previous section. I want to adjust the scrollspy so that nothing is highlighted as active at that point, and ...
I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...
I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...
I am currently developing a website using gatsbyjs. I have concerns about the crawlability of "onClick" for SEO purposes and I would appreciate some assistance. This is my current code: render={data => ( <div className='feed'> ...
I've managed to get it working to some extent, but I still need the col-**-6 elements to not stack on top of each other on smaller screens. This image shows what I'm aiming for: Each color represents a col-**-6. That's the layout I want, ...
How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...
I've been struggling with the Events assignment we were given. I tried writing my own code, but it had so many errors when I got it checked. I couldn't quite grasp all the explanations of what went wrong, so now I feel a bit embarrassed to share ...
I'm trying to find a way for an inner div to fill the height of its container with a fixed aspect ratio of 1:1. The usual method using padding works great for filling the width, but not so much for the height. Is it possible to achieve this purely wi ...
Assume I'm using the selector below: #doctors h2 { /* Insert CSS Code Here */ } Does this selector refer to all <h2> elements that are children of elements with the id="doctor" attribute? ...
Trying to dynamically bind text to aria-label on my HTML page within an Angular 2 app. Currently using the following syntax: aria-label="Product details for {{productDetails?.ProductName}}" Encountering an error: Error: Can't bind to &apo ...
I have a series of HTML pages, each with a line at the top that reads: <?xml version="1.0" encoding="UTF-8" ?> When I was working on localhost, the pages opened without any issue. However, now that I have uploaded the files to the server, I am enco ...
I'm encountering an issue while attempting to call my API using a search term from a submit form. I keep getting an error that says "cannot read properties of undefined." I'm unsure why there is no data being returned when I send the ajax request ...
Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...
Can someone please help me with making my table of rows and columns mobile responsive? I have inserted data from the database, but it doesn't adapt well for mobile devices. I have used element1 and content1 id for the background of the elements, but h ...
I'm currently in the process of working on a webpage that contains multiple dynamically generated tables. The original developers utilized logic similar to the following: <table> <tr>...</tr> <asp:PlaceHolder ID="ph1" runat=" ...
Currently, I am implementing a chat system where I display messages using jQuery, JSON, and PHP. The issue I am facing is that I need to iterate through each div within the "#chatMessages" container, which houses the messages, and verify its class existenc ...