Edit online

Change Bars

Change bars are used to mark revised elements in the content. For example, they are useful for technical documentation to flag content that was added in a new version of the file.

Display Change Bars Using the ::changebar Pseudo-Element

Suppose you have the following document:
<p>Once every 6000 kilometers or three months, you need to change the oil in your car.
It will extend your car lifetime.<span class="cb">This should be done by a specialist
in a controlled environment.</span></p>
To mark the span element as being a change bar, you can use the ::changebar pseudo-element:
.cb::changebar {
  -oxy-changebar-offset: 1mm;
  -oxy-changebar-placement: start;
  -oxy-changebar-style: solid;
  -oxy-changebar-color: black;
  -oxy-changebar-width: 1pt;
}
Tip: The change bars can be customized using the following properties:

Display Change Bars Using Start and End Markers

Suppose you have the following document:
<p>Once every 6000 kilometers or three months, you need to change the oil in your car.
It will extend your car lifetime.<change-bar-start color="blue">This should be done by 
a specialist in a controlled environment.<change-bar-end></p>
To display the change bar inside the paragraph, you can use the display: -oxy-changebar-start and display: -oxy-changebar-end properties on the <change-bar-start> and <change-bar-end> custom elements:
change-bar-start {
  display: -oxy-changebar-start;
  -oxy-changebar-color: attr(color);
}
change-bar-end {
  display: -oxy-changebar-end;
}
Notes:
  • All of the -oxy-changebar CSS properties support the attr(), oxy_xpath(), and calc() functions.
  • If you do not want to create new elements to mark the starting and ending point of the change bars, you can use the display property on both the ::before and ::after pseudo-elements (you can also use ::changebar).