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>I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. I attempted to adjust the code for proper alignment before publishing, but was unsuccessful. Here is the GitHub ...
I'm having an issue with a page that is supposed to reload the data within a div using jQuery, but it only updates once. Here's a snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0 ...
I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...
I'm currently at the beginning stages of learning Vue and am practicing implementing it. However, I keep encountering the errors "vue was used before it was defined" and "Vue is not defined". Below are excerpts from my HTML and JS files for reference. ...
For my web project that utilizes node.js, HTML, and JavaScript, I am looking to incorporate a video player element. I want users to have the ability to click a button and play an MP4 file directly on the webpage. How can I achieve this? I currently have s ...
I'm working on a script that pulls an image link, which seems to be functioning correctly. However, I am struggling with how to display the link as an image. Can someone please assist me with this? <script src="//ajax.googleapis.com/ajax/li ...
Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...
I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...
Whenever I try to input something into the form, it keeps showing an error message saying "405 Method not allowed". How can I resolve this issue? This is my route: Route::get('/search' , [HomeController::class, 'searchPost']) ...
Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...
I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...
My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...
My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...
I want to utilize the default form validation of browsers for basic validations like required and email, while handling more complex validations in my service layer. However, I am having trouble implementing the required and email properties in my form. ...
Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...
My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...
Discussing the following inquiry: Passing data to Bootstrap 3 Modal Typically, the data-id is transferred to a text box in various scenarios by using this line: <input type="text" name="bookId" id="bookId" value="" /> Is there a way to send the da ...
I'm having trouble changing the color of an Awesome Icon with this code I created. Instead of getting the desired color, I am getting 'undefined' as a result. <script type="text/javascript"> function changeAIColor(idName) { alert ...
How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...
My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...