Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm building a scalable mobile menu icon and the :after pseudo class is not working. This is intended to create 3 black lines to represent the "hamburger" menu icon. The first line is created, the second line is created using the :before pseudo class, however the :after pseudo class is not rendering, thus the third black line is not appearing.
JS Fiddle - https://jsfiddle.net/eeks1swx/
I'm not entirely sure why and I can't seem to figure it out. Any thoughts?
.hamburger {
height: 15px;
width: 20px;
position: relative;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.hamburger__line:before,
.hamburger__line:after,
.hamburger__line {
position: absolute;
height: 20%;
background-color: #000;
width: 100%;
border-left: 0;
border-right: 0;
top: 40%;
}
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
.hamburger__line:before {
top: -200%;
}
.hamburger__line:after {
top: 200%;
}
<div class="hamburger">
<div class="hamburger__line"></div>
</div>
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
... you have an uppercase L - classes are case sensitive.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I received 3 errors in the following code;
<style media="screen">
.sqs-audio-embed{
visibility: hidden;
}
Error 1: at-rule or selector expectedcss(css-ruleorselectorexpected)
Error 2: { expectedcss(css-lcurlyexpected)
Error 3: at-rule or selector expectedcss(css-ruleorselectorexpected)
This is the entire .css file
div {
font-family: Arial, Helvetica, sans-serif;
font-size: 80px;
color: #fff;
position: absolute;
left: 150px;
top: 200px;
}
.post-content{
opacity: 0.5;
top: 0px;
left: 0px;
position: absolute;
}
.thumbnail{
position: relative;
}
<style media="screen">
.sqs-audio-embed{
visibility: hidden;
}
.root{
--main-bg-color: brown;
}
I tried to search for a solution but I had no luck. Can someone explain these errors and explain how to correct them?
Thanks In Advance!
You said it's in ".css" file. <style> is an html element, so you should not use it inside css file. I think you should use media queries instead, something like this:
#media screen {
.sqs-audio-embed {
visibility: hidden;
}
}
please refer MDN Docs for more information.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am new in CSS and HTML but I creating website where I need to cover text or picture with another one. I made example in Photoshop what exactly I need:
A solution based on css shadow:
h1 {
font-family: cursive;
text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<h1>Lorem Ipsum<h1>
Online tools like : https://css3gen.com/text-shadow/ could help you to construct right text-shadow property
The code is self explanatory, Nevertheless if any question leave a comment.
Text
Using text-shadow less flexible for instance the duplicated the text will always be behind the actual text, If we want to reverse this we will have to align the shadow as the actual text and the actual text as the shadow which is a lot janky and not dynamic.
p {
margin: 2rem;
border:1px solid red;
padding:10px;
display:inline-block;
}
p:hover {
text-shadow: -5px -5px red;
}
<p>Lorem</p>
Using pseudo-element highly flexible, Can place the text anywhere, Drawback is must provide the text as an attribute or a CSS variable
p {
margin: 2rem;
padding: 10px;
display: inline-block;
position: relative;
font-size:1.3em;
}
p:before {
color: red;
position: absolute;
top: 40%;
left: 40%;
width:100%;
}
p:nth-child(1):hover:before {
content: attr(data-text);
}
p:nth-child(2):hover:before {
content: var(--data-text);
}
<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>
Image:
[box] {
width: 300px;
height: 300px;
background: url(https://picsum.photos/300);
position: relative;
}
[box]:hover:before {
content: '';
background: inherit;
width: 100%;
height: 100%;
top: 25%;
left: 25%;
position: absolute;
}
<div box></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am writing a web page but
I have a problem to position :after of .posts to bottom-right in all boxes.
Example in jsfiddle:
.posts::after {
content: " ";
width: 0;
height: 0;
border-top: 15px solid #DDD;
border-right: 13px solid transparent;
position: relative;
bottom: -41px;
right: -2px;
z-index: 999;
}
How can I achieve this?
http://jsfiddle.net/mu222/2/
Give .posts a position (relative), then set the after to position: absolute; bottom: 0; right: 0
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I need to place my second picture (img id="stack") on top of my first picture. I've tried using relative and absolute positioning but it just seems to be below each other.
This is the JS Fiddle
HTML
<div id="imgpos">
<img id="bkgr" src="http://upload.wikimedia.org/wikipedia/commons /f/fd/Moon_in_Sunrise_Sky_2.jpg" width="400" height="400">
<img id= "stack" src="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG" width="200" height="150">
</div>
CSS
#imgpos
{
position: relative;
left: 30px;
}
#imgpos bkgr
{
position: absolute;
z-index: 1;
}
#imgpos stack
{
position: absolute;
z-index: 2;
}
You forgot the octothorpe.
#imgpos #bkgr
{
position: absolute;
z-index: 1;
}
#imgpos #stack
{
position: absolute;
z-index: 2;
}
Since IDs are unique anyways, you can omit the #imgpos, too:
#bkgr {
position: absolute;
z-index: 1;
}
#stack {
position: absolute;
z-index: 2;
}
And since the images are in the right order anyways, you can omit the z-index, too:
#bkgr {
position: absolute;
}
#stack {
position: absolute;
}
And since the rules are now the same, you can combine them:
#bkgr, #stack {
position: absolute;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I want to add two triangles using pseudo elements after the text in a table header cell. You guessed it, they would represent that the column is sortable. Of course, I can do that using a background image but I want to avoid that traditional solution.
I can add one triangle using the pseudo element :after. That's easy. I cannot use pseudo element :before to add the other triangle because it is placed before the text in the "th" element. If I have to position it, using the :before pseudo element, to be placed after the text, that will not work as a generic solution because each column header has, of course, different text.
Any idea on how to get around this?
DEMO: http://jsfiddle.net/7Wfc8/
HTML
<table>
<tr>
<th>Short</th>
<th>Really much longer</th>
</tr>
</table>
CSS
th {
border: 1px solid red;
padding-right: 30px;
position: relative;
}
th:after,
th:before {
content: " ";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
right: 5px;
}
th:after {
top: -2px;
border-bottom-color: lime;
}
th:before {
top: 10px;
border-top-color: lime;
}
Here's a FIDDLE
<table>
<tr>
<th>Text</th>
<th>Text</th>
</tr>
</table>
th {
width: 160px;
padding: 5px;
border: 1px solid #999;
}
th:after {
display: inline-block;
float: right;
width: 10px;
line-height: 11px;
font-family: sans-serif;
font-size: 12px;
color: #0296cc;
content: '▲ ▼';
}