Looking for a way to replicate the decorative line under the heading using only HTML and CSS. Has anyone tried something similar before?
I have considered something like this:
<p>———•———</p>
Unfortunately, the result did not meet expectations.
To create a decorative line with a dot at the end, you can use a bottom border for the line and a pseudo element for the dot.
The dot is achieved by using border-radius to give it a spherical shape. The background-color property is used to make it white, and the border color matches the background color to mask out parts of the bottom border.
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX(-50%);
bottom: -13px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 10px solid salmon;
border-radius: 50%;
}<h2>Portfolio</h2>One thing to note is that there should be enough space between the dot and the text above to avoid overlaying/masking the text with the dot's border thickness. See the example below:
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX( -50% );
bottom: -23px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 20px solid gold;
border-radius: 50%;
}<h2>Portfolio</h2>You could also opt for a similar approach but use a bullet • as the content of the pseudo element.
I've got a ul element filled with li elements that were fetched from a json file. My goal is to pass certain data from that json file to another page (a jquery mobile page) based on the id of the clicked li element. However, I'm facing issues in ...
After successfully implementing rollover images, the code suddenly stopped working when I added a modal popup for another button on the site. I removed the modal pop-up, but now the sprites are broken. Instead of showing the light banner and dark hover eff ...
My header needs some improvement, how can I make it look better? Here is the code snippet: 1 Index.php <div class="header"> <div class="headerFont"><a href="index.php">Yo! Yo! Honey Singh..!!</a> </div> <div class="Login ...
There are only a few bootstraps that work with this site, such as the default and lumen bootstrap. You can find them on However, other bootstraps like materia and flatly seem to be causing display issues. Here's an example of how it looks: Edit: Bel ...
I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...
Trying to find a way to work around Bootstrap rows. I have multiple col-..-.. items that I need to fit into one row, but modifying 8 complex .js files is not an option for me - and they refer to the children of the div I used as a bootstrap row. HTML manip ...
My HTML code works fine when I use IDs and select them in my javascript with getElementByID. However, if I switch to using classes instead of IDs, my code stops working. I want to switch to using classes because I am collaborating on a project with someon ...
Can anyone assist me in repositioning the smoke group origin to the center so that it scales along with the rocket? I've attempted utilizing the following: transform-origin: center; translate-box: box-fill; but it doesn't seem to resolve the i ...
I've been attempting to automatically select an option in a dropdown menu, but for some reason it's not displaying the dropdown and instead showing "Nothing Selected" as the title. I tried using opt.setAttribute("selected", "selected"); in my cod ...
I apologize for the insufficient title. In the given code snippet: <?php $css = 'foo-'.$data['style']; $html= "<table><tr><td class='{$css}>styled! /> </tr> </table>; ?> whe ...
After creating a basic application using the code provided in a forum thread and testing it on the worker sandbox MTurk site, I noticed a peculiar issue. The application runs smoothly when following the code from the forum answer directly. However, when at ...
Is there a way to determine if a user is accessing our site from within our local network or from the broader internet? For example, imagine someone scans a QR code at our restaurant that leads to a page designed to check whether they are connected locall ...
When it comes to mobile browsers, Audio elements require user action before play can start. The click event usually satisfies this requirement, but touchstart doesn't seem to be an acceptable initiating event in Chrome on Android or iOS. (Refer below ...
After importing Bootstrap CSS, I noticed that extra CSS is being applied to the navbar, as seen in the image below. Although Bootstrap cards are being used in the code, the issue is specifically with the Navbar. Interestingly, the problem disappears when I ...
Just finished my very first jQuery project, a simple full-width slider. I've been focusing on HTML & CSS and currently working with C#. The problem is that I don't want the page to be scrollable; I want it to autofit to the webpage. Imagine ope ...
Is it possible to update a page and proceed with the next function without refreshing it? I have a page where clicking on the Save button submits data to earnings_amendment_account_add.php and refreshes the page. Now, my goal with AJAX is to submit the d ...
Below is a Codepen with a menu that isn't behaving as expected. var menu = document.querySelector('.nav__list'); var burger = document.querySelector('.burger'); var doc = $(document); var l = $('.scrolly'); var panel = $ ...
After receiving a string from an ajax request, the content looks like this: According to json doc, "quotes should be escaped" This information is stored in data.description, and inserted into the template like so: '<a href="#"' + ' ...
My code is designed to distribute points from a pool into stats through a form. Here is the code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://mynindo.pl/test/css/style.css"> ...
Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...