Can you help me style my two <a> tags so they appear underlined?
I can't use
border-bottom: dashed 10pxbecause the lines are thin and there is too much space between them.
.t1 {
color: #8bb09e;
}
.t2 {
color: #ffee90;
}<a href="" class="t1">text1</a>
<a href="" class="t2">text2</a>There are two main approaches, with one involving the utilization of the border-bottom: value;
.t1 {
border-bottom: 1px dashed #333;
}
If you're looking for a different style that's out of reach, such as the space issue you mentioned, consider using an image for the bottom border to achieve a similar effect.
To create a visually appealing design for your anchor, consider adding a position:relative attribute and using an absolutely positioned pseudo element. This can be achieved by incorporating a background image or a linear gradient as demonstrated in the example below:
Example: http://jsfiddle.net/6Jzu6/1
a {
position: relative;
...
display: block;
...
}
a:after {
content: '';
position:absolute;
height: 1px;
width: 100%;
top: 100%;
left: 0;
background-image: -webkit-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -moz-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -ms-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: -o-linear-gradient(left, transparent 50%, #8b0 50%);
background-image: linear-gradient(left, transparent 50%, #8b0 50%);
background-size: 20px 20px;
}
Note: The concept of using a linear gradient was inspired by this source.
Only the essentials, nothing more :)
.t1 {
display:inline-block; /* adjust width to match link content */
padding-bottom:5px; /* create space between underline and text */
border-bottom:1px dashed blue; /* specify height, style, and color of underline */
}
Update
All you require is to include the min-width property in your <a> styles. See the example below:
One technique I have implemented before involves using a pseudo element as a border replacement.
Check out the implementation here
p {
display: inline-block;
position: relative;
}
p::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px dashed #000;
position: absolute;
left: 0;
bottom: -0.5em;
}
To adjust the positioning of the pseudo element border in relation to the element, modify its bottom property.
.style1 {
color: #8bb09e;
border-bottom-style: dashed !important;
width: 30%;
text-align: center;
display: inline-block;
}
.style2 {
color: #ffee90;
text-align: center;
border-bottom-style: dashed !important;
float: right;
width: 30%;
}<a href="" class="style1">text1</a>
<a href="" class="style2">text2</a>One effective method involves using the CSS property text-decoration-line: underline.
body {
background-color: #f0f0f0;
}
a {
font-family: Arial, sans-serif;
font-size: 1.8rem;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 3px;
text-underline-offset: 0.5rem;
}
a~a {
margin-left: 15px;
}
.link1 {
color: #5aacc7;
}
.link2 {
color: #ffa07a;
}
a::after,
a::before {
content: "***";
color: transparent;
}<a href="" class="link1">Link A</a>
<a href="" class="link2">Link B</a>I am having trouble integrating a dialog box into my application and encountering the error mentioned above. Here is the jQuery code I'm using: $( "#dialog" ).dialog({ autoOpen: false, width: 450, modal: true, ...
Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...
When I dynamically generate HTML code from markdown, I typically wrap it in the <p></p> tag like so: <p class="embedded_markdown"> ... <h1>...</h1> ... <h3>...</h3> ... </p> I decided to experiment with sho ...
Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...
I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...
I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...
While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...
Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...
I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...
My experience with using md-chips and md-autocomplete reveals an issue: when I incorporate md-separator-keys, it functions as expected. However, upon adding md-autocomplete, the md-separator-keys functionality ceases to work. This is how my code is struct ...
UPDATE: Turns out the issue was with the simulator, not the video encoding. Check out my revised explanation below... I've been tasked with building a website for a local college, and part of the requirements is to embed short videos for online viewi ...
Struggling to incorporate div elements and generate graphs with Google charts? The issue arises in the draw function, where attempts to access a div element using document.getElementById() result in null values and an error message stating "container not ...
How can I prevent a popup menu from appearing again after refreshing the page? I have tried using some javascript but haven't been successful. If anyone has a solution, such as a video tutorial or code snippet, please let me know. ...
I'm in need of some assistance with the mobile menu on my website. Whenever the STORE menu is clicked on the mobile version, it doesn't expand as expected, instead, it closes the general menu. Here is the link to the webpage. Any help would be gr ...
<!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> <title>Harley's Art Gallery</title> <script t ...
Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...
Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...
I developed a small editor for managing resource files. Within this editor, I display the content of a specific resource item in a textarea: <textarea cols="85" rows="12" id='EditItemTextArea'><%# Eval("Translation")%></textarea& ...
Executing this simple code with the JavaScript line placed under Script tags will trigger the desired alert message: <!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <body> <script type="text/javascript" > ...
Is there an efficient way to monitor multiple directories in sass using a shell script? This is what I currently have in my shell script: sass --style compressed --watch branches/mysite/assets/css/sass:branches/mysite/assets/css & sass --style compre ...