Is there any way to anchor a gradient's center point to a character, speficially the "/" here: here
Is there any way to do this?
Is there any way to anchor a gradient's center point to a character, speficially the "/" here: here
Is there any way to do this?
yep. but it will be very clumsy way, involving bunch of nth-child css-rules. rather i'd suggest to add classes in the template monster.
Fngplg, I am curious to know what your solution is. I would have thought it to not be possible since CSS cannot actively search the page for content.
You could try doing the reverse. If you use a table rather than a div element, you could use CSS to align the text in the 2-cell table and insert the "/" between them at the center. Then, you would be matching the location of the character to the center of the gradient.
table.toccolours tr:nth-of-type(4) td:nth-of-type(1) div:nth-of-type(2) span:nth-of-type(2){ font-size: 40px; }:D
as someone smart said above: it is better to set classes in the template. much better.
Unfortunately, I can't edit the CSS for this wikia so I'd rather avoid any solutions that would require it if possible.
Then there is no way to do it. The only two methods would be CSS and JS; the latter is even more restricted.
<td rowspan="2"> <div style="color:white; font-variant:small-caps; text-align:center">Element</div> <div style="background-image: linear-gradient(105deg, Skyblue 45%, Blue 55%);border:solid #6d7b93;text-align:center;"> <span style="color:black;width: 40%;display: inline-block;"> Wind </span> <span style="color:gray;text-align: center;display: inline-block;width: 10%;"> / </span> <span style="color:black;width: 40%;display: inline-block;"> Water </span> </div> </td>
what does it do: gradient changed to 45/55%, if u want less/more, then change it equivalently: 48/52, 49/51 etc. 50% it is center, where "/" is placed.
spans has 40% width to have equivalent size for different content (otherwise wind takes less space than water). span with "/" sized by same reasons. if u want to change sizes, then spans with water and wind must have same sizes, and water+wind+/ must be around 90%.
note: if u will copy this code, then do not forget to remove formatting (all linefeeds, spaces and tabs).
result: https://snag.gy/ySYf3s.jpg
But how do I apply it this to the code I have currently? Wind and Water are not the only elements I'm dealing with here:
Thank you so much, I really appreciate this.