Does anyone know how to create a line after each h2 tag when the width of the headline varies?
I have been using the :after method with this code:
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
You can view the code here: http://jsfiddle.net/s9gHf/ However, I am having trouble with the line being too wide and causing layout issues.
To add a stylish touch to your <h2> elements, consider using an additional <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>Alternatively, you can achieve a similar effect without the extra <span>, but utilizing overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>For more examples and inspiration, check out these external demos: First, Second
No more need for unnecessary wrappers or span elements - Flexbox and Grid have got you covered!
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}<h2>Heading</h2>Here's an example of using flexbox:
h1 {
display: flex;
align-items: center;
}
h1 span {
content: "";
flex: 1 1 auto;
border-bottom: 1px solid #333;
}<h1>Heading <span></span></h1>If you're looking for a simple solution, consider using a flex wrapper like this:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>Upon observation, it is evident that while there are various flexbox implementations available, they often lack proper explanations on why and how to utilize them effectively.
h2.display: flexalign-items: center, we can centrally align its child elements vertically.h2 {
...
display: flex;
align-items: center;
}
after.'' to the content property, we can illustrate the element (which is mandatory).flex: auto. This ensures that our element adjusts based on its width and height properties, expanding to fill any extra space within the flex container and shrinking as needed to fit the container. Essentially, this is akin to setting flex: 1 1 auto.margin-left: 1rem.border-top: 1px solid #000.h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>I recently discovered a simple and effective method to achieve the desired outcome: just insert an hr tag before the text and adjust the margin top for the text. This approach is concise and easy to comprehend! Check out the demonstration on jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}<br>
<hr>
<h2>ABOUT US</h2>My method for achieving this effect is a bit different: http://example.com/custom-title
Instead of using the "after" pseudo-class, I opt to utilize a background image and have my H1 or H2 element cover it. While it deviates slightly from the method outlined above, it has proven to be quite effective in my experience.
Below is the CSS code I use:
<div class="custom-title"><h1>Custom Title Here</h1></div>
<div class="custom-title"><h1>Another Custom Title that is Very Long</h1></div>
As someone with limited experience, I welcome any corrections. After trying various solutions and encountering issues on different screens, I found a method that worked well for me. It renders beautifully on most screens, although there may be some exceptions on mobile devices.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...
I seem to be facing an issue with this problem. My goal is to ensure that all the child divs within a flex container have the same height as the tallest child div, which in this case is 100px. Additionally, I want them to be aligned at the center. I&apos ...
I am currently working on a popup feature that, when displayed, will blur the background of the page to a grey color. The .cover element is responsible for this overlay effect. Unfortunately, I am facing issues overriding its default opacity:0.6; property ...
Having some difficulty with the css 'counter-increment' and 'counter-reset' properties. I've successfully implemented them with lists, but struggling when it comes to header tags. Consider the following structure: <div id=" ...
I have a dilemma with my two HTML pages - index.html and register.html. I am trying to navigate from index.html to register.html, but I want to skip the select region step and go straight to the login page. Here's the code snippet I've been attem ...
I'm looking to create a circular progress bar with rounded edges on the highlighted segment, similar to this example: https://i.sstatic.net/kNKyzm.png While I've managed to create a basic version, I'm struggling to achieve the rounded ends ...
I have tested the code below. The images display in Chrome and Mozilla, but not in IE. The image format is .jpg. Can someone please assist? bodycontent+='<tr class="span12"><td class="span12"><div class="span12"><img class="span ...
When I visit my website and zoom in using CTRL +, the background image starts duplicating instead of just resizing. Other solutions I've found only stretch the image, which is not what I want. My website has a comments section that can make the length ...
Currently, I am in the process of developing a website using Bootstrap and have encountered an issue with a select component. Below is the code snippet: <tr> <td> <div class="textAlignCenter"> <select cl ...
I am interested in using an SVG as a favicon, but I do not want to reference it as a separate file like this: <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml"> Instead, I would like ...
Struggling to implement a hovering text over an image? I attempted to follow a tutorial, but couldn't adapt it to my project. While I managed to create a fixed overlay, I aim for a responsive solution that adjusts with resolution changes. My goal is t ...
I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them. ...
Just starting with apostrophe-pro and I've noticed a file named TheAposPallete.vue in the node_modules directory, located at \node_modules@apostrophecms-pro\palette\ui\apos\components This file contains the following CSS: ...
My form div contains multiple inner divs: <div class="form" style="display:none"> For example: <div class="row"> <?php echo $form->labelEx($model,'comment'); ?> <?php echo $form->textField($model,'commen ...
Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...
Instead of copying all the example code here, you can check out the jQuery demo page: Demo Page I would like to integrate the Latest News example with scrolling text in red from the demo page into my website. The demo page also provides links to the sour ...
After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...
<div class="header_section"> <div class="icon"></div> example </div> .header_section{ background: #C2E1FF; height: 24px; line-height: 24px; padding: 5px; } .icon{ background: url(http://mcgrefer.com/ ...
Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...
I have recently started learning development, and I am practicing HTML & CSS by following tutorials on YouTube. In one of the tutorial videos, the instructor explained advanced selectors, including adjacent and general sibling combinators. For example: h ...