How can I add text before or after a span in a web page?

user_5158024 0
Viewed 42

I am writing a program to (offline) generate HTML for a webpage, using a database of records which look like

 <t1>rivuyu</t1><t2>n</t2><t3>5</t3><t4>egg</t4>

The goal is for the tags to translate into spans defined to control style elements, so this should display as

rivuyu (n cl. 5) 'egg'.

I can control text attributes with span definitions like

<style>#s1 {
  font-style: italic;
  font-weight: bold;
}
#s2{
  font-style: normal;
  font-weight: bold;
}
#s3{
  font-style: normal;
  font-weight: normal;
}

The database record would then convert to

<span id="s1">rivuyu</span><span id="s2">n</span><span id="s3">5</span>

etc. which is not yet correct. The output also needs inserted text (space, parentheses, period, quotes, the string 'cl'.) . The presentation elements are fixed for the document (not user-selected), and should be easily changeable (for example in the header). I've tried to figure out how to automatically add text via a script or style definition, but I can't figure out what could possibly correspond to "add a string at the left of the span". How do I implement a rule "add blank plus '(' to the left of s1", where s1 is a span that I have defined. Automatically, not as response to an event, and not just "at the end of the paragraph".

css html
1 Answers

You can achieve this with the pseudo-elements ::before and ::after in CSS.

#s1 {
  font-style: italic;
  font-weight: bold;
}
#s2{
  font-style: normal;
  font-weight: bold;
}
#s2::before {
  content: ' (';
}
#s2::after {
  content: ' cl. ';
}
#s3{
  font-style: normal;
  font-weight: bold;
}
#s3::after {
  content: ') ';
}
#s4::before {
  content: "'";
}
#s4::after {
  content: "'.";
}
<span id="s1">rivuyu</span><span id="s2">n</span><span id="s3">5</span><span id="s4">egg</span>

user_145451600
Related