Css selector idea, using both pseudo class & element WordPress
- SOLVED
I got a css selector problem, hope someone can help this out.
Please see this jsfiddle link:[[LINK href="http://jsfiddle.net/bardirian/z4xcd95v/"]]http://jsfiddle.net/bardirian/z4xcd95v/[[/LINK]]
What I need is to have a text content after the "Item1", well it looks simple but I try a lot different syntaxes just never work.
The result should be looks like the attached file, adding text content by using :after.
*Do not change the html structure since this is trouble with a wp theme.
And please updated it from jsfiddle.
Answers (5)
Dbranes answers:
Did you try this:
.project-info h3 + div.project-info-box div:after {
content : "Text"
}
[[LINK href="http://jsfiddle.net/z4xcd95v/24/"]]http://jsfiddle.net/z4xcd95v/24/[[/LINK]]
Bard comments:
oops, I guess this does what I want lol, I will try this later(I am going out for a meeting)
Dbranes comments:
great, sure ;-)
Sachindra Narayan answers:
hi Bard Tian, your choices can be anything as per your need... though this might be helpful...
<blockquote>
<style type="text/css">
h4{
margin:0px 0px 6px 0px;
}
.project-info-box{
padding-left: 10px;
margin: 0px 0px 33px 10px;
background: rgba(18,18,18,0.1);
padding: 10px;
}
.project-info-box div.project-terms{
padding-left:10px;
}
.project-info-box div.project-terms a{
color:red; text-decoration:none; display:inline
}
.project-info-box div.project-terms p{
margin:0px; padding:5px 0px; line-height:20px; display:inline
}
</style>
</blockquote>
<blockquote>
<div class="project-info" style="">
<h3>Section</h3>
<div class="project-info-box">
<h4>Title1:</h4>
<div class="project-terms">
<a href="#">Item1</a>
<p>Lorem Ipsum Dolor is the dummy text. Lorem Ipsum Dolor is the dummy text. Lorem Ipsum Dolor is the dummy text. Lorem Ipsum Dolor is the dummy text. Lorem Ipsum Dolor is the dummy text. </p>
</div>
</div>
<div class="project-info-box">
<h4>Title2:</h4>
<div class="project-terms">
<a href="#">Item2</a>
</div>
</div>
</div>
</blockquote>
"i guess jquery would be a better solutions"
<blockquote>
$('.project-info div.project-info-box:first-child a').append('-');
</blockquote>
Bard comments:
I guess you have misunderstand on my question, what i need is adding text content :after Item1.
zebra webdesigns answers:
I hope this is what you are looking for
[[LINK href="http://jsfiddle.net/z4xcd95v/2/"]]http://jsfiddle.net/z4xcd95v/2/[[/LINK]]
Bard comments:
Thank you but not, I want it only adding in Item1.
Bard comments:
I can't change the HTML structure, this is a css question I am trouble with the theme Avada
Bard comments:
The Avada page here
http://theme-fusion.com/avada/portfolio-items/quisque-sit-amet-unte/
zebra webdesigns comments:
Hi guys I wrongly downvoted to sai instead of upvoting.
is there any way to rever it back.
Sai I am terribly sorry for that.
Navjot Singh answers:
You just need a specific ID for the item 1's div tag. Your code would be something like [[LINK href="http://jsfiddle.net/navjotjsingh/gksqd5vt/1/"]]http://jsfiddle.net/navjotjsingh/gksqd5vt/[[/LINK]]
Bard comments:
Please don't change the html structure since this is a theme trouble, the question i am asking is a css selector soluction.
Bard comments:
the theme page is here http://theme-fusion.com/avada/portfolio-items/quisque-sit-amet-unte/
Sai kumar answers:
Hi,
Please check : http://jsfiddle.net/z4xcd95v/5/
Hope this will be helpful.
Thanks
Sai
Sai kumar comments:
Hi,
I think this is what you are looking for : http://jsfiddle.net/z4xcd95v/6/
Thanks
Bard comments:
Please don't change the original html
Sai kumar comments:
Hi,
Please use this : http://jsfiddle.net/z4xcd95v/21/ and let me know
Thanks