CSS ::after border issue2019 Community Moderator ElectionSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?Is it possible to apply CSS to half of a character?CSS position:fixed is working for the header but not for the footerAutoresize css tooltip
Which classes are needed to have access to every spell in the PHB?
In the late 1940’s to early 1950’s what technology was available that could melt ice?
What are you allowed to do while using the Warlock's Eldritch Master feature?
Can't make sense of a paragraph from Lovecraft
Can the alpha, lambda values of a glmnet object output determine whether ridge or Lasso?
Expressing logarithmic equations without logs
What is this diamond of every day?
Getting the || sign while using Kurier
Rationale to prefer local variables over instance variables?
How do spaceships determine each other's mass in space?
Possible to detect presence of nuclear bomb?
Is this Paypal Github SDK reference really a dangerous site?
Called into a meeting and told we are being made redundant (laid off) and "not to share outside". Can I tell my partner?
Gaining more land
What's the 'present simple' form of the word "нашла́" in 3rd person singular female?
Does "Until when" sound natural for native speakers?
What sort of fish is this
Is it a Cyclops number? "Nobody" knows!
How to design an organic heat-shield?
Proving a statement about real numbers
Specifying a starting column with colortbl package and xcolor
How exactly does an Ethernet collision happen in the cable, since nodes use different circuits for Tx and Rx?
Why is a very small peak with larger m/z not considered to be the molecular ion?
Why does Solve lock up when trying to solve the quadratic equation with large integers?
CSS ::after border issue
2019 Community Moderator ElectionSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow do I vertically center text with CSS?Is it possible to apply CSS to half of a character?CSS position:fixed is working for the header but not for the footerAutoresize css tooltip
-2
Hope you all doing very good. Here i am facing an issue related to ::after in css, please find the code details at below....
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>Here i want to remove extra border-color added in on ::after of tooltip tag. Please let me know if anything more need more from my side. Thanks in advance!!!
Just wanted to removed black ::after border should be look like this as its showing below image
html css
asked Mar 6 at 12:30
S TiwariS Tiwari
428
add a comment |
-2
Hope you all doing very good. Here i am facing an issue related to ::after in css, please find the code details at below....
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>Here i want to remove extra border-color added in on ::after of tooltip tag. Please let me know if anything more need more from my side. Thanks in advance!!!
Just wanted to removed black ::after border should be look like this as its showing below image
html css
asked Mar 6 at 12:30
S TiwariS Tiwari
428
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
1
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49
add a comment |
-2
-2
-2
Hope you all doing very good. Here i am facing an issue related to ::after in css, please find the code details at below....
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>Here i want to remove extra border-color added in on ::after of tooltip tag. Please let me know if anything more need more from my side. Thanks in advance!!!
Just wanted to removed black ::after border should be look like this as its showing below image
html css
asked Mar 6 at 12:30
S TiwariS Tiwari
428
Hope you all doing very good. Here i am facing an issue related to ::after in css, please find the code details at below....
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>Here i want to remove extra border-color added in on ::after of tooltip tag. Please let me know if anything more need more from my side. Thanks in advance!!!
Just wanted to removed black ::after border should be look like this as its showing below image
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
// disabled buttons
.Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>html css
html css
asked Mar 6 at 12:30
S TiwariS Tiwari
428
asked Mar 6 at 12:30
S TiwariS Tiwari
428
edited Mar 6 at 14:42
S Tiwari
asked Mar 6 at 12:30
S TiwariS Tiwari
428
asked Mar 6 at 12:30
S TiwariS Tiwari
428
asked Mar 6 at 12:30
S TiwariS Tiwari
428
428
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
1
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49
add a comment |
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
1
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
1
1
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49
add a comment |
2 Answers
2
active
oldest
votes
0
In order to achieve the look in the image, you need to use :before and :after laid on top of each other. Your code needed to add a little more than just an after tag to get the effect you're looking for.
Might be worth looking at a tooltip generator like this to help you in future.
For now, I have amended your code to what the image looks like:
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>answered Mar 6 at 14:38
coopscoops
751319
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
add a comment |
0
You just set the border property inside .Product__sizes__button from solid to none. It will remove the border around it.
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>edited Mar 7 at 3:27
coops
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55023165%2fcss-after-border-issue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
In order to achieve the look in the image, you need to use :before and :after laid on top of each other. Your code needed to add a little more than just an after tag to get the effect you're looking for.
Might be worth looking at a tooltip generator like this to help you in future.
For now, I have amended your code to what the image looks like:
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>answered Mar 6 at 14:38
coopscoops
751319
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
add a comment |
0
In order to achieve the look in the image, you need to use :before and :after laid on top of each other. Your code needed to add a little more than just an after tag to get the effect you're looking for.
Might be worth looking at a tooltip generator like this to help you in future.
For now, I have amended your code to what the image looks like:
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>answered Mar 6 at 14:38
coopscoops
751319
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
add a comment |
0
0
0
In order to achieve the look in the image, you need to use :before and :after laid on top of each other. Your code needed to add a little more than just an after tag to get the effect you're looking for.
Might be worth looking at a tooltip generator like this to help you in future.
For now, I have amended your code to what the image looks like:
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>answered Mar 6 at 14:38
coopscoops
751319
In order to achieve the look in the image, you need to use :before and :after laid on top of each other. Your code needed to add a little more than just an after tag to get the effect you're looking for.
Might be worth looking at a tooltip generator like this to help you in future.
For now, I have amended your code to what the image looks like:
.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>.Product__sizes__button
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
a.Product__sizes__tooltip
position: absolute;
display: inline;
top: 50px;
left: 80px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>answered Mar 6 at 14:38
coopscoops
751319
edited Mar 6 at 15:07
answered Mar 6 at 14:38
coopscoops
751319
answered Mar 6 at 14:38
coopscoops
751319
answered Mar 6 at 14:38
coopscoops
751319
751319
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
add a comment |
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
No please see my post just now i have updated it
– S Tiwari
Mar 6 at 14:42
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Your code looks nothing like the picture that you have now added. However, I have amended my answer to include a few more features for you. Take a look. Does this help you at all?
– coops
Mar 6 at 15:01
@STiwari Did this help you?
– coops
Mar 6 at 15:32
@STiwari Did this help you?
– coops
Mar 6 at 15:32
add a comment |
0
You just set the border property inside .Product__sizes__button from solid to none. It will remove the border around it.
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>edited Mar 7 at 3:27
coops
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
add a comment |
0
You just set the border property inside .Product__sizes__button from solid to none. It will remove the border around it.
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>edited Mar 7 at 3:27
coops
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
add a comment |
0
0
0
You just set the border property inside .Product__sizes__button from solid to none. It will remove the border around it.
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>edited Mar 7 at 3:27
coops
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
You just set the border property inside .Product__sizes__button from solid to none. It will remove the border around it.
.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>.Product__sizes__tooltiptext
display: none;
.Product__sizes__button
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext
display: block;
opacity: 1;
.Product__sizes__tooltip
position: relative;
display: inline-block;
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>edited Mar 7 at 3:27
coops
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
edited Mar 7 at 3:27
coops
751319
edited Mar 7 at 3:27
coops
751319
edited Mar 7 at 3:27
coops
751319
751319
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
answered Mar 6 at 12:34
muhammad tayyabmuhammad tayyab
1129
1129
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
add a comment |
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
Hi please find the link of code pen codepen.io/anon/pen/vPgywB , as per this code i just wanted to remove ::after border...
– S Tiwari
Mar 6 at 13:38
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
can anyone have solution on this ????
– S Tiwari
Mar 6 at 14:59
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
Do you mean like this? codepen.io/anon/pen/BbpxOv
– muhammad tayyab
Mar 6 at 18:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55023165%2fcss-after-border-issue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi @BanshiLalDangi please find the code link codepen.io/anon/pen/vPgywB
– S Tiwari
Mar 6 at 13:35
1
Does your code look like this in your text editor? Why wouldn't you at least format it correctly before wondering why it doesn't work?
– ESR
Mar 6 at 14:46
Actually if you will see my code .. i just want change in ::after border only .. and my ::after border should look like as per image....
– S Tiwari
Mar 6 at 14:49