How do I make the first line of ::after in bold?
I'm making a CSS snippet for Obsidian. I want to make a Dropdown for tags that start with '#-'. How do I make the first line bold?
I can't change HTML code:
<p>
<a href="#-Dropdown" class="tag" target="_blank" rel="noopener">
#-Dropdown
</a>
</p>
Those CSS blocks don't even appear in the devtools:
a.tag[href^='#-']::after::content {
font-size: 20px;
}
a.tag[href^='#-']::after::first-line {
color: red;
}
A jsfiddle if you're willing to try yourself
i add an icon next to a div whose contenteditable property is set to true. Until i add this icon, contenteditable was working perfectly (i was able to edit and cursor was placed to end of the entry upon pressing end key). But with addition of this icon, i am still able to edit the value but the cursor is not placed at end of entry upon pressing end key. Any idea what i might be doing wrong here.
<ul>
<li>
<div name="value" class="divinline" contenteditable="true">Test1</div>
<a class="removelink" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<img src="/../images/remove_grey.png" alt="X" ></a>
</li>
</ul>
CSS
.divinline {
display: inline;
}
a.removelink {
float: none !important;
border: medium none !important;
display: inline !important;
}
I'm trying to display with css the navigation buttons that are located inside my jquery rotating banner.
Which are:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
For some reason I can't show them, I've tried changing their position, setting a z-index, adding a background-image and color.
Here's the website:
http://npmaudiovisual.com/esde/
This is what I have:
This is what I should have (buttons on corners)
You need some room for them on the page or they will be hidden.
Also there is no text or image within the DIVs.
a class="ls-nav-prev" href="#" style="float:left;">Prev</a>
<a class="ls-nav-next" href="#" style="float:right;">Next</a>
Firstly, your CSS for the following:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
in layerslider.css just has
.ls-nav-prev,
.ls-nav-next {
outline: none;
}
This does not generate any image or content. How are you testing it?
Secondly, separate the classes and add positioning properties:
.ls-nav-prev {
left:-35px
position:absolute
top:200px
}
.ls-nav-next {
left:935px
position:absolute
top:200px
}
You can play around with the left and top property values to suit your needs.
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
† According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login
OK, I added a universal style to my main.css that says:
a:active {
top:1px;
position:relative;
}
This gives me a nice little "nudge" effect when anything is clicked. Consequently, I had to go around to all of my absolutely positioned <a> elements and fix them from jumping up to top:1px and manually give them the proper nudge.
Although I have run into this one case that has thrown me for a loop on a couple levels. I think I got the positioning all sorted out, but what's happening when I click the anchor is that the <span> element that comes next in the containing <li> disappears while the anchor is being clicked.
I did try setting the <span> to float:left but instead of disappearing it just began lining up beside the anchor and hanging outside the containing <li>.
Here's the page: http://beta.helpcurenow.org/media/videos/
What I'm referring to on this page are the thumbnails that sit below the main video window. There are thumbnail feeds from vimeo with a video screenshot and the meta data. The video screen shot has a hidden span in the anchor so that when you hover over the thumbnail it appears. This is what is causing the meta data to disappear when clicked.
And if you'd like to just see the markup here, it is below:
<ul id="video-gallery">
<li>
<a class="video-thumbnail" href="#">
<img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/>
<span class="play-arrow"></span>
</a>
<span class="video-metadata" id="video-13466402">
<span class="video-title">Amy Fann Interview</span>
<span class="video-likes meta">Likes <span class="value">0</span></span>
<span class="video-views meta">Views <span class="value">2</span></span>
<span class="video-duration meta">Duration <span class="value">01:48</span></span>
<span class="video-post-date meta">Posted 1 day and 7 hours ago</span>
<span class="video-url hidden-data">http://vimeo.com/13466402</span>
<span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span>
</span>
</li>
</ul>
And the CSS...(obviously there are several other style rules for this section, but I'm going to try to include only the relevant ones)
li a.video-thumbnail span.play-arrow {
display:none;
}
li:hover a.video-thumbnail span.play-arrow {
display:block;
width:122px;
height:86px;
background:url(/img/media/play-arrow.png) no-repeat center top;
position:absolute;
top:40px;
left:50px;
}
li:hover a.video-thumbnail:active span.play-arrow {
position:absolute;
top:30px;
left:40px
}
li a.video-thumbnail:active {
position:absolute;
top:auto;
}
li.added-video {
display: none;
}
This CSS should fix your problem (at least it did for me in firebug):
li a.video-thumbnail:active {
position: static;
}
li:hover a.video-thumbnail:active span.play-arrow {
top: 40px;
left: 50px;
}
I don't know exactly why your meta was being hidden on :active, but the above prevents the position type of the thumbnail link from changing and keeps everything in place.