Is there a way to create a horizontal line on just the left side of my text? Currently, the code I have creates a line on both sides. How can I modify it to achieve this?
h2 {
width: 100%;
text-align: center;
border-left: 1px solid #000; // Adjusted to only create line on the left side
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #fff;
padding: 0 10px;
}
Utilizing the existing HTML structure, you have the option to utilize Flexbox along with :after and :before pseudo elements.
h2 {
display: flex;
align-items: center;
justify-content: center;
}
h2 span {
background: #fff;
margin: 0 15px;
}
h2:before,
h2:after {
background: black;
height: 2px;
flex: 1;
content: '';
}
h2.left:after {
background: none;
}
h2.right:before {
background: none;
}<h2 class="left"><span>THIS IS A TEST</span></h2>
<h2 class="right"><span>LOREM</span></h2>
<p>this is some content</p>I always make it a point to utilize the :before and :after pseudo-classes of CSS when attempting to achieve this particular effect.
In the following demonstration, I have visually "hidden" the right side using the :after pseudo-element
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
display: none;
}<h1>Heading</h1>
<h1>This is a longer heading</h1>After considering the proposition outlined above, the most straightforward answer emerges:
.line {
display: inline-block;
width: 220px;
height: 1px;
background-color: #987;
vertical-align: middle;
}<div>text here<span class="line"></span></div>Are you looking for something similar to this? You can achieve it by using pseudo elements and absolute positioning.
h2 {
position: relative;
width: 100%;
text-align: center;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2:after {
z-index: -1;
position: absolute;
/* Change "right: 0" to "left: 0" for left side line */
right: 0;
content: '';
width: 50%;
border-bottom: 1px solid #000;
}
h2 span {
background: #fff;
padding: 0 10px;
}<h2><span>THIS IS A TEST</span></h2>
<p>this is some content</p>Utilize div elements:
Cascading Style Sheets
.line { display: inline-block; width: 100px; height: 1px; background-color: #000; }
h2 { display: inline-block; }
HyperText Markup Language
To create a left horizontal line:
<div class="line"></div>
<h2>Insert Text Here</h2>
For a right horizontal line:
<h2>Insert Text Here</h2>
<div class="line"></div>
For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...
I'm looking to modify the hover color on my navbar. The Navbar currently has a black background with text in #b3b3b3 color. I want the text to turn white when hovered over, instead of staying the same color, but none of the CSS codes I've tried s ...
In my current view, I have integrated a react component as shown below: <Jumbotron> Lots of vital information </Jumbotron> I am looking to give this particular instance a unique style, like using a different background image. However, addin ...
I have successfully coded a parser, shown below: from bs4 import BeautifulSoup import requests source = requests.get('https://www.nike.com/fr/w/hommes-chaussures-nik1zy7ok').text soup = BeautifulSoup(source, 'lxml') csv_file = open(&a ...
Here are my HTML code segments: <div class="div-builder"> <div> <a href="#"> <img src="/photos/20/Apple-Logo-icon.png" width="50" alt="Logo"> </a> <h3>Title</h3> < ...
Seeking assistance with parsing data from a website. The JSON request runs successfully in the command line but encounters issues when attempting to execute it on Android: The request: "curl '' -H 'Host: billetterie.ctm.ma' -H &apo ...
I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...
While attempting to remove a row from my MySQL PHPMyAdmin database using a button in AssetApprovalForm.php, I encountered an issue. Upon clicking the decline button in AssetApprovalForm.php, nothing happens. Click here for the image of AssetApprovalForm.p ...
Currently, I am working on a web page and have noticed some discrepancies in the window widths when viewing the page using Google Inspector. The issue seems to occur when comparing the page hosted on Github pages with the one hosted on a local server. You ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var canvas_element; var initial_x = 200; var initial_y = 300; var x_movement = 1; function start_canvas() {setInterval(draw_circle, 10); canvas_element = bouncing_ball_c ...
I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...
I'm attempting to embed a website within another website using an Iframe. I've successfully loaded the page, but now I need the embedded site to adjust its height according to the actual content on that site, not just the height of the container ...
I am looking to automate a specific process that involves an Error modal popping up. I am trying to use Selenium to capture this modal which appears in multiple instances. So far, I have attempted to locate it by XPath without success. Using CSS selector o ...
Is there a way to embed Flash directly in HTML, rather than linking to an external SWF file? I am looking to send an HTML form via email for the recipient to fill out by opening it in a browser. The final step would involve copying the result to their clip ...
Recently, I created an XML file and attempted to access it using my web browser. It worked perfectly fine in Internet Explorer, but when I tried opening it in other browsers, it failed to function properly. After some investigation, I discovered that the i ...
Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...
Looking for a way to position text at the bottom of a background image? Here's how you can do it: <div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px"> ...
Is there a way to use hue-rotate to change the colors of my text links without affecting my image links? I have tried removing the effect from images only, but haven't been successful. Any suggestions on how to achieve this? I created a JavaScript but ...
To develop an interactive program based on JSON input, I aim to display headers, subheaders, and choices derived from the JSON data. Some input fields may remain unfilled. For instance: Header Subheader Choice 1 Choice 2 Subheader2 Choice ...