I have a button with span included which then has a pseudo-selector, :before applied to it in some cases.
When the element (button) receives focus, the :before is also receiving focus and the focus ring, resulting in something like this:
While I'd like to keep the focus ring on the button itself, I'm having a difficulty removing it from the contained :before element. See this JSFiddle:
https://jsfiddle.net/uhgsj6cp/3/
The HTML/CSS is fairly basic:
.btn {
width: 100px
}
.btn>span {
position: relative;
}
.btn>span:before {
display: block;
content: '•';
font-size: 32px;
position: absolute;
left: -13px;
top: -13px;
}
<button class='btn btn-default'>
<span>Text</span>
</button>
Reduce the line-height then hide the overflow:
.btn {
width: 100px
}
.btn>span {
position: relative;
}
.btn>span:before {
/*display: block; not need*/
content: '•';
font-size: 32px;
position: absolute;
left: -13px;
top: 0;
overflow:hidden;
line-height:0.4;
}
<button class='btn btn-default'>
<span>Text</span>
</button>
I was able to ALMOST remove that artifact outline with adjusting line-height and top on the pseudo element.
However, you could also try using the HTML • to produce the bullet within the button.
Related
I am trying to position a very basic div inline with some text.
When I move the div it leaves blank spaces that I can't remove. Would you be kind to guide me with some css tricks for it?
.chord {
color: orangered;
font-weight: bold;
display: inline;
position: relative;
top: -20px;
left: 20px;
}
<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>
Fiddle, in case you want to play with it.
https://jsfiddle.net/rondolfo/r3dphgsL/11/
I did search for an answer and I couldn't find it, but I believe it is a very basic problem for someone that is proficient in css.
Use inline-flex instead of inline, set the width to 0. That will remove the space, but still show the chord text. You can also remove the left adjust and add a space before the div.
.chord{
color: orangered;
font-weight: bold;
display: inline-flex;
position: relative;
top: -20px;
width: 0px;
}
Setup some classes to use as before elements and position them accordingly. You can even make one for each chord as demonstrated below.
.chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}
<br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>
My problem is that when the class is-sticky is added to my menu, my ::before and ::after on logo are not necessary anymore. I'm not the biggest hero with Jquery and can't fix it with a online search.
the div
<div id='Top_bar' class='is-sticky'>
<div class='container>
<div class='top_bar_left>
::before
<div class='logo>
::after
</div>
</div>
</div>
</div>
My scss
.logo {
background: #1A2741;
padding: 0 50px;
width: 13%;
margin: 0 !important;
#logo {
margin-left: 39%;
}
&::before {
content: ' ';
background-image: url(../uploads/RH-Beelmerk.svg);
height: 100px;
width: 50px;
position: absolute;
padding: 50px;
z-index: 2;
top: -85%;
left: 1%;
transition: top 2s;
}
&:hover::before {
top: -50%;
}
&::after {
content: '';
background: #1A2741;
height: 110px;
width: 50px;
display: block;
transform: rotate(10deg);
position: absolute;
left: 15.5%;
top: -6%;
z-index: 0;
border-right: solid 4px #FF8496;
}
}
You can either unset their content (content: unset;) or turn off their display (display: none).
For instance, here's unsetting the content (which was originally posted as an answer by doğukan but then deleted for some reason; since this answer was accepted, I've added that here and marked the post Community Wiki):
.is-sticky::before, .is-sticky::after {
content: unset;
}
Depending on the selector adding them, you may need to make that more specific, but that's the general idea.
Example:
setInterval(() => {
document.querySelector(".target").classList.toggle("is-sticky");
}, 800);
.target::before {
content: 'before';
}
.target::after {
content: 'after';
}
.is-sticky::before, .is-sticky::after {
content: unset;
}
<div class="target"> text </div>
Or turning the display of the content off instead:
.is-sticky::before, .is-sticky::after {
display: none;
}
Example:
setInterval(() => {
document.querySelector(".target").classList.toggle("is-sticky");
}, 800);
.target::before {
content: 'before';
}
.target::after {
content: 'after';
}
.is-sticky::before, .is-sticky::after {
display: none;
}
<div class="target"> text </div>
Put the condition with 'is-sticky' and unset the :before and :after children. Then you can just toggle the 'is-sticky' class on the logo. And keep in mind that :before and :after are children of your class-element, not elements outside of your class-element.
.logo{
&.is-sticky{
&:before, &:after{
content: none;
}
}
}
How about using the CSS :not test, that way you don't get the pseudo elements if is-sticky is set.
See MDN:
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
e.g. &:not('.is-sticky')::after instead of &::after
That way you don't need any extra entries in the CSS.
As a part of my study project, I need to change the background of a single word ("adventure") inside a paragraph. I'm not allowed to change HTML code, can use CSS only.
<p class="section_text">
Welcome to adventure!
</p>
The only idea I have is to set a background to a pseudo-element ::after and play with position relative/absolute, but it doesn't feel right.
.section_text {
position: relative; }
.section_text::after {
content: "adventure";
background-color: #04128f;
color: #0f0;
width: 65px;
height: 20px;
position: absolute;
top: 0;
left: 90px; }
Are there any smart ways to do that (it should work in the last version of Chrome)?
P.S. Can not use JS or jQuery neither. Exclamation sign background shouldn't be changed.
Set an intrinsic font-size to the :root selector. ex. :root {font-size: 5vw}. This makes the font responsive to viewport width.
Make the background of <p> the highlight color (ex red) and set its width: max-content.
Next <p> needs position: relative and then z-index: -1
Add two pseudo elements to <p>
p::before {content: 'Welcome to';...}
/*and*/
p::after {content: '!';...}
Assign position: absolute, z-index: 1, and background: white
Finally set right: 0to p::after so the exclamation mark is always at the very end
Note: the property/value content: 'Welcome to\a0'; on p::before selector has \a0 at the end. This is the CSS entity code for a non-breaking space (HTML entity: )
:root {
font: 400 5vw/1 Consolas
}
p {
position: relative;
width: max-content;
z-index: -1;
background: red;
}
p::before {
position: absolute;
content: 'Welcome to\a0';
background: white;
z-index: 1
}
p::after {
position: absolute;
content: '!';
background: white;
z-index: 1;
right: 0
}
<p>Welcome to adventure!</p>
Edit: to change background-color for an arbitrary position word, see zer00ne's answer above. I didn't read the question thoroughly, so I wasn't aware that the OP wants the word adventure not adventure!
The smartest way to change any arbitrary word is to wrap it inside a span tag. Here's the workaround for changing the background of the last word: From your delivered code, display: inline-block for p tag, and don't set width for ::after element.
.section_text {
display: inline-block;
background: #3333;
position: relative;
}
.section_text::after {
content: 'adventure!';
position: absolute;
right: 0;
height: 100%;
z-index: 1;
background: red;
}
<p class="section_text">
Welcome to adventure!
</p>
I'm trying to create a custom component using only CSS and HTML.
The behavior of the component will be like: when the input is selected (has focus) another container is open.
The problem is when the container is opened the input lose focus and the container is closed on first click :(
So How can I have that input focus focused when I'm on the opened container focused ?
<div class="block">
<label>Field</label>
<input type="text" tabindex="-1"/>
<div tabindex="-1" class="infront">
Keep this bastard open.<br/>
<br/>
while clicking on this div
</div>
</div>
CSS
.block{
position: relative;
display: inline-block;
margin: 50px;
}
.infront{display: none;}
.block input[type="text"]:focus ~ .infront {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
Fiddle:
You need to take care of the state of .infront container states as well.
Update your CSS to this
.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active
, .infront:focus {
display: block;
position: absolute;
top:100%;
width: 80%;
right: 0;
background: #ccc;
opacity:0.8;
}
I think you can not do it only with HTML and CSS. You will need some jquery code like this:
$(.block input[type=text]).on('focus', function(e) {
$('.infront').show();
});
When hovering over a child element in firefox using this rule .parent:hover > .child { /*style*/ }, the child element is treated as not part of the parent element and therefore not styled. like in the snippet below, in firefox if you hover over the button, the child element is affected but when the div is hovered it will not changed.
But in chrome hovering over the parent and child will affect the child.
I find this useful to what am working on right now, so is there a way I can achieve the same effect in firefox?
button {
position: relative;
}
button:hover > div {
background-color: #67BDFF;
}
button:hover > div:before {
content: "SMURF!";
position: absolute;
font-weight: bolder;
font-size: 20px;
top: 10px;
}
button > div {
position: absolute;
top: 18px;
left: 0;
padding: 40px;
}
<button>
hover over me and my child will turn smurf
<div>
i'll remain smurf if you over over me cus am part of my parent, but not in firefox
</div>
</button>
<button> elements are only allowed to contain phrasing content (read more) - so technically a <div> is not allowed to be inside a <button>. Because this HTML is non-compliant, you'll see different behavior in each browser.
Here's a cross-browser way to do what your code was trying to do, which works in Firefox:
button {
width: 300px;
}
button + div {
padding: 40px;
position: relative;
width: 220px;
}
button:hover + div,
button + div:hover {
background-color: #67BDFF;
}
button:hover + div:before,
button + div:hover:before {
content: "SMURF!";
position: absolute;
font-weight: bolder;
font-size: 20px;
top: 10px;
}
<button>
hover over me and my child will turn smurf
</button>
<div>
i'll remain smurf if you over over me cus am part of my parent, but not in firefox
</div>