CSS Before Selector not working in Content Only

[Kevin5FC2]

I'm using Before Selectors in my CSS for Notes, Tips, and Warnings. This are not converted to inline styles for the Content Only output. I've tried adding a Post Build Script, but can't get it to work. Any suggestions?

[Peter Grainge]

Does they work in a frameless or responsive output? 

Content Only can be set to a number of Targets in the preset. I'm wondering if they are valid in a Content Only output. Not something I can confirm either way.

If no one else pops in with an answer, try Support.

See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your support contact options.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Kevin5FC2]

@Peter Grainge Thanks for the quick response. Yes, the selectors work in both frameless and responsive HTML outputs.

[Peter Grainge]

That rather confirms my theory about the output type not supporting that. Sorry but beyond my knowledge. As above, try Support.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Stefan-Gentz]

As the name says, "Content Only" only outputs the pure content – without any layout/formatting.

:before and :after are pseudo-elements (not selectors) and part of layout/formatting information. They are generated in runtime by the rendering engine (usually a web browser) and added to an element as part of the rendering process. That is, they are neither part of the source document's HTML structure, nor the content. Therefore they are not included in "Content Only" output.

That said: A Post Build Script will likely not help you, as it runs "post build" – and at this point any information that might help you to identify a structural element  (e.g. through it's class) in the content and modify it is already gone.

Maybe an approach:

Create a JavaScript that runs through your topics, selects the elements with the corresponding class (e.g, "warning"), and inserts a "real" paragraph with the required text in it (e.g., "⚠ WARNING!").

Example

HTML5:

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="warning">
    <p>Some warning text goes here.</p>
  </div>
</section>
<section>
  <button onclick="ConvertCssBeforeToP()">CSS:before → p</button>
  <button onclick="ConvertPToCSSbefore()">p → CSS:before</button>
</section>

CSS:

div.warning {
  padding: 10px;
  margin: 10px;
  background-color: #2C2C2C;
  color: #F5F5F5;
  font-weight: bold;
}

div.warning:before {
  content: '⚠ WARNING! ← generated with CSS before';
}

div.OutputWarning {
  padding: 10px;
  margin: 10px;
  background-color: #2C2C2C;
  color: #F5F5F5;
  font-weight: bold;
}

p.OutputWarning {
  color: #FA0F00;
  font-weight: bold;
}

Javascript:

var $i;
var $para = document.createElement("p");
var $paratext = document.createTextNode("⚠ WARNING! ← a real paragraph");

$para.classList.add("OutputWarning");
$para.appendChild($paratext);

function ConvertCssBeforeToP() {
  var $x = document.querySelectorAll("div.warning");
  for ($i = 0; $i < $x.length; $i++) {
    $x[$i].insertBefore($para, $x[$i].firstChild);
    $x[$i].classList.add("OutputWarning");
    $x[$i].classList.remove("warning");
  }
}

function ConvertPToCSSbefore() {
  var $x = document.querySelectorAll("div.OutputWarning");
  var $y = document.querySelectorAll("p.OutputWarning");
  for ($i = 0; $i < $x.length; $i++) {
    $x[$i].classList.remove("OutputWarning");
    $x[$i].classList.add("warning");
  }
  for ($i = 0; $i < $y.length; $i++) {
    $y[$i].remove();
  }
}

Explanation:

There are two buttons in the HTML that call one of the two functions:

1. Function ConvertCssBeforeToP changes the div's class from "warning" (which automatically generates "⚠ WARNING! ← generated with CSS before" in the "normal" web output) to "OutputWarning" (which does not genrate the text). Then it adds a real paragraph with the content "⚠ WARNING! ← a real paragraph".
2. Function ConvertPToCSSbefore turns that around (so to say, an Undo function) and changes the div's class back to "warning" and removes the formerly generated warning paragraph again.

That is, initially your source document looks like this:

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="warning">
    <p>Some warning text goes here.</p>
  </div>
</section>

Function ConvertCssBeforeToP changes it to this:

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="OutputWarning">
    <p class="OutputWarning">⚠ WARNING! ← a real paragraph</p>
    <p>Some warning text goes here.</p>
  </div>
</section>

I have create a small code pen where you can test it live and play with it:

https://codepen.io/stefan-gentz/pen/PoGMKov

Feel free to use and change the code as you like.

Hope that helps.

[Kevin5FC2]

@Stefan-Gentz Thanks, I'll give it a try. I guess I took the "Convert all styles into inline styles" setting on the preset a little too literal. I have a VBS post-build, but don't know enough JS to make it work.