I am attempting to create something that looks like this:
https://i.sstatic.net/XXwFg.png
However, my current implementation only results in this:
https://i.sstatic.net/a8f6u.png
Below is the code I have been using:
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
<hr>
</div>
</div>
</div>
You might want to consider using the :after selector along with relative and absolute positioning. Here is an example:
h5{
position:relative;
}
h5:after
{
content:' ';
display:block;
border-bottom:4px solid #409bf7;
width:200px;
position:absolute;
padding-bottom:21px;
}
hr{
border-top:none;
border-bottom: 2px solid #666;
}<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title"><span class="border-bottom border-primary">Category List</span></h5>
<hr>
<h5 class="card-title"><span class="border-bottom border-primary">Category List</span></h5>
<hr>
<h5 class="card-title"><span class="border-bottom border-primary">Category List</span></h5>
<hr>
<h5 class="card-title"><span class="border-bottom border-primary">Category List</span></h5>
<hr>Add an :after pseudo element to the span tag in order to create a bottom border that only spans as far as the content itself. Adjust the positioning by making the elements relative and the pseudo tag absolute with a left of 0 and a bottom of -1.6rem.
.border-bottom {
position: relative;
}
.border-bottom::after {
content: '';
position: absolute;
height: 4px;
background: #138ab5;
bottom: -1.6rem;
left: 0;
width: 100%;
}<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<span class="border-bottom border-primary">List of Categories</span>
</h5>
<hr>
</div>
</div>
</div>Here are some styles you can apply to the hr tag:
hr {
background-color: #333;
border: none;
display: block;
height: 6px;
overflow: visible;
position: relative;
width: 100%;
}
hr:before {
background-color: #f00;
content: '';
display: block;
height: 10px;
left: 0;
position: absolute;
top: -4px;
width: 30%;
z-index: 1;
}
span.border-bottom.border-primary {
border-bottom: 2px solid #0aa092;
padding: 0 0 10px;
}
Creating a carousel slider with CSS has been quite successful on Chrome, Firefox, and IE. Check out how it looks below: https://i.sstatic.net/u49Yc.png To make the slider fill up the screen within its container, I applied some tricks like this: margin-l ...
Having trouble with the nth-child property. The issue lies with the #subnav element. I'm unsure why nth-child isn't working as expected (supposed to change border color and width). Here's the problem and code snippet : <div class=" ...
I seem to be encountering an issue with this particular script where it consistently generates the error mentioned in the title. Title: cell.setHorizontalAlignment(SpreadsheetApp.HorizontalAlignment.CENTER) function CustomFont() { // var spreadsheet ...
FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...
Is there a way to have a handler on the calling object of the onclick event? <a href="123.com" onclick="click123(event);">link</a> <script> function click123(event) { //I need access to <a> in order to man ...
I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected. Could someone please help me figure out what I'm doing wrong here? Be ...
Here is the JavaScript code I have written: $(function(){ $('input[type="radio"]').click(function(){ var txt = $(this).parent().text(); var $radio = $(this); if ($radio.data('waschecked') == true) { ...
I am looking to create a unique scrollable drop-down menu on a webpage that includes select box features like hover on key press. For instance: Within my drop-down menu, there are approximately 100 elements, Apple Ant Ball Orange .... The menu should be ...
After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...
I have integrated the use of [innerHTML] within <mat-option> in <mat-select>, which displays correctly in the drop-down list but not for the selected value. Versions: Browser Google Chrome 68.0.3440.106 (Official Build) (64-bit) Angular 6.1 ...
I have two columns, A & B. Some items in A open multiple items in B. A will toggle its corresponding B Items - BUT clicking on an A that includes an already opened B starts to mess up the toggle. I want each item in A to open its respective items in ...
I recently launched a Django website using a Bootstrap template. However, I encountered an issue where the expand menu feature of the navbar does not work properly on mobile devices. Can anyone provide guidance on how to resolve this issue? .nosh_color ...
view image description hereMy responsive web design site (built with Bootstrap 3) is functioning perfectly on Chrome, Edge, and Opera browsers. However, on Firefox, the grid layout initially loads correctly but then breaks after a second? view image descr ...
Even though this topic is borderline related to programming questions, I believe it's still relevant here. After all, only those of us who are actually coding for a website would be considering this aspect. Lately, I've been delving deeper into ...
Is there a way to achieve this layout using flexbox without relying on grid due to limited support in IE11? I want to be able to easily add or remove small divs without adding more containers. To see the desired layout, check out this image: Desired Layou ...
What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...
When working with React & NextJS, I have observed that my modular SCSS files are automatically prefixing my classnames with the name of the file. Is there a way to turn off this feature as it is making the DOM structure difficult to interpret? For instanc ...
As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...
Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...
My website has a feature that allows users to save and add images for locations they have visited. The location details are stored in a MySQL database, while the image files are saved on my server in a folder with both original and thumbnail versions. I h ...