giannit

Thank you very much @joyously !
I improved a bit the code and now the result looks like this

code is

.above {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5em;
  }
  .above::before {
    position: absolute;
    top: 90%;
    height: 6px;
    width: 100%;
    border: 1.5px currentcolor solid;
    border-top: 0;
    content: "";
  }
  .above .below {
    position: absolute;
    width: 100%;
    left: 0;
    top: 140%;
    font-size: 0.75em;
    text-align: center;
  }

The product <span class="above">2 · 2 · 2 <span class="below">2<sup>3</sup></span></span> can be written as power.

Do you think the code can be improved more?
Here is a DEMO, I noticed that if I increase the font-size then the distance between the border and the below text increases, why is that?
Thank you very much!

• This reply was modified 6 years, 5 months ago by giannit.
• This reply was modified 6 years, 5 months ago by giannit.

@sterndata Thank you, I am using the plugin Advanced Excerpt, I don’t have templates, instead I write the <p class=textbox><b>TOPIC</b> description</p> at the very beginning of each post, and the plugin shows just that <p> and nothing else. That is, I don’t have to manually create the excerpts.

@joyously Thank you, I do want to see the shortcode in the excerpts. Since I have a hundreds of posts it is handy to have a plugin (advanced excerpt) which automatically creates the excerpts.

I tried this javascript to replace the string [VF], but it doesn’t work, why?

function myFunction() {
  var str = document.getElementsByClassName("textbox")[0].innerHTML;
  var res = str.replace("[VF]", "test");
  document.getElementsByClassName("textbox")[0].innerHTML = res;
}

I know it is not a common usage, but since in my posts there will be only this kind of shortcodes, it is useless to have to write each time [my_name_shortcode name="shortcode_name"] when I can more rapidly write [shortcode_name].

The previous example (print the name of the shortcode) is just an example to let you understand that what I need is to be able to handle a string variable (taken from an array of strings) and use it inside the definition of a shortcode.

What have I to write in place of ??? in order to generate the shortcodes [foo] and [bar] having as content <div class=con>[block slug=foo]</div> and <div class=con>[block slug=bar]</div> respectively?

$shortcodes = array("foo", "bar");
function my_shortcode_function() {
	remove_filter( 'the_content', 'wpautop' );
	$content = apply_filters( 'the_content', '<div class=con>[block slug=???]</div>' );
	add_filter( 'the_content', 'wpautop' );
	return $content;
}
foreach( $shortcodes as $name ){
    add_shortcode ($name, 'my_shortcode_function');
}

Oh thanks, is this correct?

$shortcodes = array("foo", "bar");
function my_shortcode_function( $name ) {
	remove_filter( 'the_content', 'wpautop' );
	$content = apply_filters( 'the_content', '<div class=con>[block slug=$name]</div>' );
	add_filter( 'the_content', 'wpautop' );
	return $content;
}
foreach( $shortcodes as $name ){
    add_shortcode ($name, 'my_shortcode_function( $name )');
}

@jdembowski oh thank you!
Could you please re-open my thread which has been closed since it was incorrectly associated with this one?
Here is the thread https://wordpress.org/support/topic/how-to-properly-hide-the-div-of-an-inline-collapsible-button/

Ah so it’s enough to write .redtext + ul

I can’t since I’m working on localhost, I can show you screens from the inpector tool though: