:before and :after CSS properties ignoring in mpdf library. Any alternatives to counter increment and content CSS?
<style>
body {
counter-reset:counter;
}
.list {
display: table;
color:red;
}
.list:before {
font-size: 16pt;
display: table-cell;
counter-increment: counter;
content: counter(counter) ". ";
padding-right: 5px;
}
</style>
<h5>Hello World</h5>
<p class="list">first.</p>
<p class="list">second.</p>
This is the sample html.
Related
These are the instructions:
Follow the Step by Step instructions below:
Open the styles.css file.
Add a CSS rule for the body element that sets the background color to #E0E0E2.
Add a CSS rule for the h1 element that sets the text color to: #721817.
Add a CSS rule for the h2 element that sets the text color to: #721817.
Add a CSS rule for the center-text CSS class that aligns the text to center.
Add a CSS rule for the HTML element with the id logo. Set its left and right margins to auto and changes its display to a block element.
Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.
Add a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em
body{
background-color:#E0E0E2;
}
h1{
color: #721817;
}
h2{
color: #721817;
}
.center-text{
text-align: center;
}
#logo{
margin-left: auto;
margin-right: auto;
display: block;
}
#span {
color: #FA9F42;
font-size: 0.75em;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
body{
background-color:#E0E0E2;
}
h1{
color: #721817;
}
h2{
color: #721817;
}
.center-text{
text-align: center;
}
#logo{
margin-left: auto;
margin-right: auto;
display: block;
}
h2 > span {
color: #FA9F42;
font-size: 0.75em;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
The span is a child of the h2 hence it must be done this h2 > span
Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.
In your css set #span , but in your assignment need set for all span in h2
h2 span { color... }
I figured it out!!
Use this. You'll get 100%.
h2 > span{
color: #FA9F42;
font-size: 0.75em
}
**all test casese passed **
body{
background-color:#e0e0e2;
}
h1{
color: #721817;
}
h2{
color: #721817;
}
.center-text{
text-align: center;
}
#id{
display: block;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
h2 > span{
color: #fa9f42;
font-size: 0.75em
}
#logo{
margin-left: auto;
margin-right: auto;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="logo.png" id="logo">
</div>
<div class="center-text">
<h1>Our Menu</h1>
<h2>Falafel <span>NEW</span></h2>
<p>Chickpea, herbs, spices.</p>
<h2>Pasta Salad</h2>
<p>Pasta, vegetables, mozzarella.</p>
<h2>Fried Calamari</h2>
<p>Squid, buttermilk.</p>
</div>
<div class="center-text">
<p id="copyright">
Copyright Little Lemon
</p>
</div>
</body>
</html>
I'm trying to modify my WordPress theme the way I want through the Additional CSS part in Appearance>Customize.
I want all my h1 tags in entry-content class to be like this:
so I used this code:
.entry-content h1 {
background-color: #cfbc00;
display: inline;
background-color:#000000;
}
I want the whole block to be colored #cfbc00 and the background of the text itself to be black. But the browser does not apply these simultaneously to my tag and it applies only one of the attributes. What should I do?
If you don't have access to the HTML code, then here is a CSS workaround:
.entry-content
{
position: relative;
}
.entry-content h1::before
{
content: "";
display: block;
position: absolute;
width: 100%;
background-color: #cfbc00;
height: 40px;
z-index: -1;
}
.entry-content h1 {
display: inline;
background-color: #000000ad; /* Sets transparency according to sample image */
top: 0;
/* Line height to maintain the height of the :before element */
line-height: 40px;
color: #fff;
font-size: 35px;
padding: 5px;
}
<div class="entry-content">
<h1>Test title</h1>
</div>
I was unable to find any solution to my problem. I don't want any space between child elements so i have added float:left to child elements. But it is causing problem when elements breaks into 2 lines.
HTML :
<span class="section-title">
<span class="yellow">This</span>
<span class="red">is</span>
<span class="brown">test</span>
<span class="">content</span>
</span>
CSS :
.section-title {text-align:center;}
.section-title span {float: left; display:inline-block;}
To remove the unwanted space, don't float: left;, but set font-size: 0; on the parent element, re-setting it on the children to the font-size you want.
Also, you used a span for the container which by default has display: inline;. Here, you want an element that has display: block;. With display: inline; the text-centering cannot work.
So either set display: block; on the span or use a div instead of a span. div has display: block; by default. I'd recommend the latter, but I'm not sure whether you have control over the HTML, so I did not change it.
.section-title {
text-align: center;
font-size: 0;
display: block;
}
.section-title span {
font-size: 36px;
display: inline-block;
text-transform: uppercase;
}
.yellow {
color: yellow;
}
.red {
color: red;
}
.brown {
color: brown;
}
<span class="section-title">
<span class="yellow">This</span>
<span class="red">is</span>
<span class="brown">test</span>
<span>content</span>
</span>
Try following code :
.section-title {
text-align: center;
display: block;
}
.section-title span {
font-size: 36px;
display: inline-block;
text-transform: uppercase;
}
I use something like the fiddle below on my personal site as a strip of metadata on individual news items. For #media min-width: 500 and up, the containing box is given an explicit width and floated left, and the child elements h2 and p receive { display: block; } When I view this strip on small frames on my desktop (Firefox/Ubuntu 12.10), there's a space between h2 text and p text, just as I expect for inline elements like span elements and em elements. When I view this on my iPhone (Chrome or Safari/iOS 7), the h2 and the p text run together.
What's the correct behavior per the W3C recommendation for CSS?
http://jsfiddle.net/2tGe5/6/
<aside class="meta">
<div>
<p class="subtitle">Posted Jan 15, 2014</p>
<h2 class="heading">Link</h2>
<p class="subtitle">http://link.me/o</p>
<h2 class="heading">Key words</h2>
<p class="subtitle">
Facebook
</p>
</div>
</aside>
aside.meta {
float: none; background-color: #ffb;
}
aside.meta h2,
aside.meta p { display: inline; }
aside.meta > div
{ padding: 0.5em 1em 0.5em 1em; line-height: 1.0em; }
aside.meta .subtitle { color: gray; font-style: normal; padding: 0; margin: 0; font-size: 0.8em; font-family: "Helvetica", sans-serif; }
aside.meta h2.heading { padding: 0; font-size: 0.8em; }
aside.meta h2.heading:before { content: " \00b7 "; display: inline }
aside.meta h2.heading:first-child:before { content: none; display: inline }
Thanks for your help.
I want a new <div> to appear on thumbnail hover.
You can inspect my code on http://techgeek.lt/naudinga/
This works:
#main:hover .whitewrapper {
display: block;
}
but it hovers on #main.
I already tried (and no luck):
img.thumbnail:hover .whitewrapper {
display: block;
}
#main img.thumbnail:hover .whitewrapper {
display: block;
}
.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail img:hover .whitewrapper {
display: block;
This works:
.post-more a:first-child:hover ~ .whitewrapper, .whitewrapper:hover {
display: block;
}
Both :first-child and the general sibling combinator (~) are supported in IE7+ and all modern browsers.
You need to fix that first a in each post:
<div class="post-more">
<a href=".." onclick=".."<a title=".." href=".." >..</a></a>
that's broken HTML, which causes the selector I've provided to fail in some browsers.
You may be able to use the + selector type.
If the div comes directly after the img, this should work:
img.thumbnail:hover + .whitewrapper {
display: block;
}
Update: I tested it and it works for me. Here's the jsfiddle.