I want to achieve a similar look as the example below:
Here is what I have done so far:
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 48px;
margin-right: -100%;
margin-left: 10px;
border-bottom: 1px solid black;
border-left: 1px solid red;
border-right: 1px solid red;
}<h2>html</h2>Is there anyone who can assist me with this?
Here is a suggestion you can try out:
h2 {
display: inline-block;
}
h2:after {
content: "";
display: inline-block;
height: 0.7em;
width: 48px;
margin-left: 10px;
border-left: 4px solid red;
border-right: 4px solid red;
background:linear-gradient(#000,#000) center/100% 4px no-repeat;
}<h2>html</h2>If you prefer the red to have rounded corners, you may attempt this:
h2 {
display: inline-block;
position:relative;
padding-right:50px;
background:linear-gradient(#000,#000) center right/ 30px 4px no-repeat;
}
h2:before,
h2:after{
content: "";
position:absolute;
right:0;
top:5px;
height: 0.7em;
width: 4px;
background:red;
border-radius:35%;
}
h2:after {
right: 30px;
}<h2>html</h2>Update
In case you want it below the text, consider using only the background option:
h2 {
display: inline-block;
padding:0 8px 8px;
background:
linear-gradient(red,red) bottom right/4px 15px,
linear-gradient(red,red) bottom left /4px 15px,
linear-gradient(#000,#000) 0 calc(100% - 5px)/100% 4px;
background-repeat:no-repeat;
}<h2>html</h2>For a design with radius, you can follow this approach:
h2 {
display: inline-block;
position:relative;
padding:0 8px 8px;
background:linear-gradient(#000,#000) 0 calc(100% - 5px)/100% 4px no-repeat;
}
h2:before,
h2:after{
content: "";
position:absolute;
right:0;
bottom:0;
height: 0.7em;
width: 4px;
background:red;
border-radius:35%;
}
h2:after {
left: 0;
right:auto;
}<h2>html</h2>After creating a fiddle to check for conflicts with other styles on my page, I ran into an issue with an inline list. There seems to be a slight drop in the middle item's positioning that I can't figure out. Despite trying various margin adjustme ...
On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...
I currently have a single page that contains two forms, with only one form being displayed at the moment. The concept is that if the user selects a specific state from the drop-down menu and clicks on the submit button, they will be redirected to either a ...
I need assistance automating a custom drop-down field that consists of DIV, UL, and LI elements. Select class or CSSSelector are not viable options due to the dynamic nature of the field. <div id="boundlist-1092" class="x-boundlist x-boundlist-floa ...
I recently hosted a .Net application on my Local IIS Server. Unfortunately, I neglected to handle error cases in MVC, opting instead to utilize the IIS .NET Error for page redirection to a specific page. When errors occur, the ASP.Net error page shows up ...
If I write the following line on its own, he cuts it without any reason. So...: Greetings, I'm in need of assistance regarding an issue that is currently beyond my understanding. I'm facing a challenge with a small TPL-System which requires so ...
I have a question about an issue I am facing with my Angular Bootstrap UI implementation. Here is the code snippet: <div class="container" ng-controller='sCtrl'> <tabset id='tabs'> <tab heading="Title1"> ...
I am facing an issue with dynamically placing input types within a <td> tag - the innerHTML() method is not functioning properly in Internet Explorer, although it works fine in Mozilla. This is how I am inserting the input types using JavaScript, wi ...
I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...
Just a quick query here - what's the best way to cut a background image for optimal lazy loading? I have an image that's 1920px wide and 5100px tall. I'm trying to figure out the best approach to cutting and loading it efficiently. Is my i ...
I am seeking a way to retrieve the dimensions (coordinates) of all HTML elements on a webpage as they appear in a browser, including their rendered positions. Specifically, I need to obtain values like (top-left, top-right, bottom-left, bottom-right) Afte ...
I have experimented with various combinations of Bootstrap 4's flexbox align utilities, as outlined in their documentation, but to no avail. Is there a way to ensure that the second <select> in the form below is aligned at the bottom of the row ...
After a ripple animation on an item has executed, I would like to run a function. Currently, I am using the following code: <post-card id="card1"> <img width="70" height="70" src="../images/start.png"> <h2>P ...
I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, an ...
Is it possible to change the drop zone's background color to green or red based on whether the dragged payload contains supported file types (JPEG)? Do Gecko and Webkit browsers have the ability to determine the file type of drag and drop files? ...
I'm dealing with a ng-repeat that has varying heights. When I set a fixed height, everything looks fine. However, I need the parent panel's height to adjust automatically based on the ng-repeat child elements to avoid overflow issues. Is there a ...
Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...
I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...
I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...
Hello there, I have a collection of SVG files that I need to dynamically modify the fill color of, preferably using CSS. Here is the structure: <div> <svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin m ...