Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question:
Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question:
If you want to create a border using a pseudo-element, here's how you can do it. (see example)
.pseudo_border {
position:relative;
display:inline-block;
}
.pseudo_border:after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:50%;
height:6px;
background:#00f;
}
To achieve this effect, position the pseudo-element absolutely relative to its parent element. Set its position at 100% from the top and use left:0; right:0 along with margin:auto for horizontal alignment. Adjust the dimensions of the element as needed and alter the margin-top for spacing.
Utilizing a negative spread radius for box shadow effect :
body{text-align:center;}
h2{
font-size:40px;
color:#409FB3;
display:inline-block;
height:50px;
box-shadow: 0 25px 0 -23px #5CC7A8;
}<h2>Some title</h2>Please keep in mind that - spread-radius x2 < height to ensure the visibility of the box-shadow effect.
Another approach is to achieve the same effect using linear-gradient. By creating a background image with gradients that are transparent for the first and last 25%, while the middle 50% has color, you can make it appear as if it is 50% of the actual h2 text. This background is then positioned at the bottom of the element to give the appearance of a bottom border. The size of the border can be adjusted by changing the background-size.
This technique works well even when the amount of text in the h2 varies. However, one drawback is that browser support for gradients is not as robust compared to using pseudo-elements or box-shadow.
Please note: The script used in this solution is only to avoid browser prefixes :)
h2{
display: inline-block;
text-align: center;
padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%);
background-size: 100% 5px;
background-position: 0% 100%;
background-repeat: no-repeat;
}
.semitransparent{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.25) 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
.colored{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, aliceblue 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
/* Just for demo */
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
font-family: Calibri, Tahoma;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Some Text</h2><br/>
<h2 class='semitransparent'>Some Lengthy Text</h2><br/>
<h2 class='colored'>Some more examples yay!!</h2>A clever trick to create a faux border is to encase the element in a div and add a border div below the title.
Check out this JSFiddle for a visual reference
HTML
<div id="border-wrapper">
<h2>My address</h2>
<div id="border"></div>
</div>
CSS
#border-wrapper{
position:relative;
display:inline-block;
}
#border{
position: relative;
width: 50%;
height: 2px;
background-color: blue;
margin: 0 auto;
}
Many solutions in the past have used positioning to achieve a certain effect, but by utilizing display: flex, we can accomplish it quite easily. The following example demonstrates adding an underline to a heading, but the technique can be applied to any element. Keep in mind that with flex-direction: column, child elements will be stacked.
HTML
<h3 class="heading">Voila! An underline appears.</h3>
CSS
.heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.heading:after {
content: '';
border-bottom: 1px solid #ccc;
padding-top: 10px;
width: 50px;
}
Please note that you may need to include vendor prefixes for flex for certain browsers, especially older versions of IE. Check browser support at https://caniuse.com/#search=flex.
h2 ::after {
background-color: #f1991b;
content: "";
display: block;
border-top: 2px solid black;
margin-top: 15px;
width: 50px;
}
<style>
.main{
text-align:center;
}
.title{
font-weight: 400;
display: inline-block;
padding-bottom: 20px;
position: relative;
}
.title::after {
content: "";
position: absolute;
width: 60%;
height: 2px;
bottom: 0;
left: 0;
border-bottom: 4px solid #ff5533;
right: 0;
margin: 0 auto;
}
</style>
<div class="main">
<h1 class="title">
Your New Title
</h1>
</div>
While using Selenium for WebScraping, I've encountered difficulty detecting an element using xpath, full xpath, id or text. <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> <div class=cbp-vm-options">...& ...
I am looking to extract the values from a cell of an HTML table in order to store them in a MySQL table using PHP. I prefer to utilize JavaScript instead of jQuery. I have assigned a unique ID to each TR based on the ID field in the MySQL table. Additiona ...
I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...
I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...
Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...
I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse ...
Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...
I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...
After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...
I have written the code snippet below, however I am encountering an issue where every element alerts the index of the last iteration. For instance, if there are 24 items in the elements array, each element will alert "Changed row 23" on change. I underst ...
I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...
For some reason, my webpage has been split by the React.js library. When attempting to scroll down while hovering over the top navigation menu, scrolling becomes impossible. However, scrolling works fine when done on any other part of the screen. I' ...
Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...
I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...
Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...
Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...
Recently, I encountered a unique situation in Chrome where an odd combination of styles led to an issue. To help illustrate the problem, I created a fiddle which can be viewed here: http://jsfiddle.net/C3CbF/1/ This particular issue is only visible if you ...
What I am trying to achieve is a ticker with two buttons that can increment or decrement the value by one each time they are clicked. In addition, I want this value to be synced with a number stored in a text file. For instance, if both the counter and t ...
My project is based on AngularJS, and I've been trying to incorporate a jQuery code for a sticky sidebar feature. Strangely enough, when I tested my code on Plunkr, it works perfectly fine. However, when I try to implement it in my actual project, it ...
For those familiar with Upwork's UI, you may have noticed a small feature I implemented. When a user clicks on a freelance job offer, another page opens from the left side using transform: translate(120%) to transform: translate(0). The issue arises ...