Unable to select or access to the property of :before & :after element on Edge`s inspect element is there any thing we can do for that?
.arrow_box {
position: relative;
background: #d43959;
border: 4px solid #ac1f3c;
width: 300px;
height:200px;
margin-top:20px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(213, 55, 55, 0);
border-bottom-color: #d53737;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(245, 88, 99, 0);
border-bottom-color: #f55863;
border-width: 26px;
margin-left: -26px;
}
<div class="arrow_box"></div>
Codepen link
This snippet working fine but on Microsoft edge I can't access this pseudo element:
.arrow_box:after, .arrow_box:before
The #supports rule allows you to handle your pseudo element on Microsoft Edge.
#supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
This was previously not a feature supported in Edge, however as of version 16 (currently available in insider builds, and being released on October 17, 2017) this has been added.
Related
I have this test setup. When I hover over the "Block 1" it should get transformed while keeping its integrity. What I see is that background color is changing. It seems like it's all about background of that .blocks:after element.
(if I comment that, background of element won't change while hovering over).
So, what could cause a problem?
Source - https://jsfiddle.net/1k5e2090/6/
body {
background: #d3d3d3;
}
.blocks {
display: flex;
position: relative;
width: 150px;
height: 55px;
margin: 25px;
justify-content: center;
align-items: center;
color: white;
font-family: 'Helvetica', sans-serif;
font-size: 20px;
}
.blocks#block1 {
background: #4BACC6;
left: 500px;
top: 200px;
}
.blocks#block2 {
left: 500px;
top: -50px;
background: #9BBB59;
}
.blocks#block3 {
left: 200px;
top: -45px;
background: #C0504D;
}
.blocks:after {
position: absolute;
content: '';
background: #F2F2F2;
top: -7px;
left: -7px;
right: -7px;
bottom: -7px;
z-index: -1;
}
.blocks#block1:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(75, 172, 198, 0.45);
}
.blocks#block2:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(155, 187, 89, 0.45);
}
.blocks#block3:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(192, 80, 77, 0.45);
}
.blocks#block1:hover {
transition: 1s ease;
transform: translate(-100px);
}
It's because of the :after behavior on .blocks elements. See this fiddle
.blocks:hover:after { border: 6px solid #fff; background: transparent; z-index: -2; }
.blocks {
border: 7px solid #f2f2f2;
}
i have edited your fiddle https://jsfiddle.net/1k5e2090/9/
you have used the border as a :pseudo element which is not necessary. it is actually creating the problem
In place of using before and after use simple border on blocks and gives box shadow, This is happened because you use position absolute in before and after so when a block moves before and after adopt automatically.Hope it work
Simple use border around the block and remove before and after your problem will solved
Following is my jsfiddle which works fine without overflow:hidden but I have to use this property cause if I dont use it i am not able to put ... when there is an overflow of text above certain width. Kindly help me how Display arrow when there is overflow:hidden?
http://jsfiddle.net/rP5q3/1/
.arrow_box {
position: relative;
background: #1D2027;
border: 4px solid #1D2027;
width:50%;
color:white;
display:inline-block;
float:left;
margin-left:2px;
color:#FFF;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden !important;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(29, 32, 39, 0);
border-left-color: #1D2027;
border-width: 14px;
margin-top: -14px;
}
.arrow_box:before {
border-color: rgba(29, 32, 39, 0);
border-left-color: #1D2027;
border-width: 20px;
margin-top: -20px;
}
You can use jQuery to run what you are trying. Of course is an example, if you could explain a bit more what are you trying to do I think I will be able to make a simple code to make it work with jQuery.
var arrowBox = $("div").find(".arrow_box");
if (arrowBox.css({"overflow" : "hidden"}){
// jQuery code to display the arrow when "overflow:hidden;"
};
Here you have a demo on JSFiddle.
Is it possible to achieve something like this (straight line "cut" with a kind of arrow / triangle 30 pixels from the left) fully in CSS? (did this using adobe fireworks but want to get rid of images as much as possible on my website).
Here is what I have tried without success: http://jsfiddle.net/U8AF6/
Many thanks
CSS
body {
background: red;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: red;
border-width: 16px;
margin-left: -16px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 22px;
margin-left: -22px;
}
You can use pseudo elements for that.
Please see Nicolas Gallagher's experiment for more: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The basic code is:
.triangle:before,
.triangle:after {
content: "";
position: absolute;
bottom: -15px; /* value = - border-top-width - border-bottom-width */
left: 30px;
border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
border-style: solid;
border-color: #aaa transparent;
}
.triangle:after {
bottom: -14px; /* -1px of first element for border */
border-color: #fff transparent;
}
Please see an implementation here: http://dabblet.com/gist/11146863
This only works on solid background.
it's possible with some css3 transformations(in ways i consider "dirty") and if you want to support older browsers css3 is out of question
here:Fiddle
.bottom-line{
border-bottom:1px solid #999;
}
.bottom-line:after{
content:"";
display:block;
margin-bottom:-8px;
border-right:1px solid #999;
border-bottom:1px solid #999;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width:12px;
height:12px;
background-color:#fff;
z-index:200px;
margin-left:100px;
}
also check #drublic's answer.
If you need to support older browsers(pre ie9),your other option is creating a small down arrow picture, place it after some 1px border and give the image an -1px margin so it overlaps the border.
so given this html/css
http://cdpn.io/gwkfy
.tooltip {
position: relative;
background-color: #369;
display: inline-block;
width: 300px;
height: 200px;
}
.tooltip:before {
position: absolute;
content: "";
left: 100%;
top: calc(50% - 10px);
width: 0;
border-style: solid;
border-width: 10px;
border-color: transparent;
border-left-color: rgba(0, 0, 0, 0.5);
}
<div class="tooltip"></div>
is it possible to have the arrow inherit the background color of the tooltip content?
is it possible to have the arrow inherit the background color of the
tooltip content?
Well, no unless you use JavaScript.
However, you could set border-color property for the parent, and use inherit value for the child:
.tooltip {
background-color: #369;
border-color: #369;
}
.tooltip:before {
border-left-color: inherit;
}
JSFiddle Demo
I find the below code can run perfectly on IE8,IE9 and firefox,but can not run well on IE7,the up arrow can not show up,why?
CSS:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
HTML:
<br/>
<br/>
<br/>
<div class="arrow_box"><h1 class="logo">css arrow please!</h1></div>
:before and :after selectors are not supported on IE7.
You would either have to change your CSS to not use :before and :after, or you can use a js shiv that will basically emulate the behavior of those selectors using javascript. Here's a post about how to do that.